z-index
我们在html里面输入一个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
<div>
<ul>
<li> <img src="image/4.jpeg"></img></li>
<li class="L2">第一行文字</li>
<li class="L3">第二行文字</li>
<li class="L4">第三行文字</li>
<li class="L5"></li>
<!-- 背景 -->
</ul>
</div>
</body>
</html>
然后在css文件里面输入以下代码
div{
padding: 0;
margin: 0;
border: 1px red solid;
width: 251px;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
.L2,L3,L4,L5{
position: relative;
}
.L5{
width: 251px;
background: black;
height: 20px;
position: relative;
/* top: -87px;*/
}
.L2{
position: relative;
top: -25px;
color: lightgoldenrodyellow;
}
浏览器打开就是这个样子
，我们把下面那个黑色框框移动到上面，那个第一行文字那里
这时候却发现第一行文字被遮挡住了，
我们可以利用z-index来把他改变位置，调制最高层
.L2{
z-index: 99;
}
就会发现第一行文字处于，黑色框框的上面了
z-index：99；
后面可以填的数值为0~∞
0最小，∞最大
透明度opacity
之前我们应该知道rbga
这个关键词吧，可以调节透明度的
.L5{
opacity: 0.5;
}
就会发现黑色框框变成透明的了
opacity跟rbga差不多一样
都是0~1之间的数值
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
