6.4、z-index
图层:
z-index:默认是0,最高无限 一般写0-999
核心代码:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<ul>
<li><img src="images/bg.jpg" alt=""></li>
<li class="tipText">学习微服务,找工一</li>
<li class="tipBg"></li>
<li>时间:2099-01-01</li>
<li>地点:月球一号基地</li>
</ul>
</div>
</body>
</html>
css
#content {
width:380px;
padding:0px;
margin:0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li {
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul {
position: relative;
}
.tipText,.tipBg {
position: absolute;
width:380px;
height: 25px;
top:216px;
}
.tipText {
color:white;
z-index: 0;
}
.tipBg {
background: #000;
opacity: 0.5;/*背景透明度*/
filter:Alpha(opacity=50);
}
效果图: