<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index及透明度</title>
<link rel="stylesheet" href="z-index.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="../resource/image/face.jpg" alt=""></li>
<li class="tipText">学习Java</li>
<li class="tipBg"></li>
<li>时间：2099-10-10</li>
<li>地点：月球一号基地</li>
</ul>
</div>
</body>
</html>
以下是z-index.css部分：
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
#content{
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid rgb(14, 14, 14);
width: 150px;
}
/* 父级元素相对定位 */
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 150px;
top: 140px;
height: 25px;
}
.tipText{
/* z-index层级
默认最低是0，最高是999
*/
z-index: 999;
color: aliceblue;
}
.tipBg{
background: #000;
/* 背景透明度 */
opacity: 0.5;
}
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
