代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<link rel="stylesheet" href="./024.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="../../image/blank.jpg" alt=""></li>
<li class="tipText">学习JAVA</li>
<li class="tipBg"></li>
<li>时间：future</li>
<li>地点：火星</li>
</ul>
</div>
</body>
</html>
#content{
width: 380px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #5f91d6 solid;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 216px;
}
.tipText{
color: #c2ffdb;
z-index: 0;
}
.tipBg{
background: #000000;
opacity: 0.5;/*背景透明度*/
filter: Alpha(opacity=50);
}
img{
width: 300px;
height: 300px;
}
运行结果：
