<!-- z-index 层级 默认为最小值0 最大值无上限 opacity 透明度 0-1 -->
代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- z-index层级 默认为最小值0 最大值无上限 -->
<style>
div{
margin: 0;
padding: 0;
border: 1px solid cornflowerblue;
width: 693px;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
li{
line-height: 25px;
}
#first,#third{
position: absolute;
bottom: 30px;
}
#first{
color: white;
z-index: 1;
}
#third{
background: black;
width: 693px;
height: 25px;
z-index: 0;
/* 透明度 */
/*opacity: 0.5;*/
}
</style>
</head>
<body>
<div id="d">
<ul>
<li><img src="image/图片.png" height="596" width="693"/></li>
<li id="first">床前明月光</li>
<li id="second">疑是地上霜</li>
<li id="third"></li>
</ul>
</div>
</body>
</html>
运行效果
显然,若不设定白色字体“床前明月光”一句的层级高于黑色背景,其将被覆盖