元素的层级和背景图片

最新推荐文章于 2022-11-29 12:32:11 发布

原创最新推荐文章于 2022-11-29 12:32:11 发布 · 484 阅读

CC 4.0 BY-SA版权

z-index(数值)设置元素层级
设置层级后，父元素层级在高也不会盖住子元素
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
opacity设置元素透明背景
opacity可以用来设置元素背景的透明，它需要一个0-1之间的值：

参数：0表示完全透明，1表示完全不透明，0.5表示半透明
在IE6中这种方法不支持，所以有下面的方法：

filter: alpha(opacity=50);
透明度，需要一个0-100之间的值，0表示完全透明，100表示完全不透明，50表示半透明

元素的层级

<div class="box2"></div>

<div class="box3"></div>

<div class="box4">
	<div class="box5"></div>
</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 background-image设置背景图片语法：background-image：url（相对路径）

代码：background-image: url(img/1.png);
1
background-repeat：用来设置图片的重复方式
可选值：

repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复

背景

<!-- <link rel="stylesheet" type="text/css" href="css/bgstyle.css"> -->

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23