2021-06-26图层的概念

最新推荐文章于 2024-09-13 23:28:46 发布

pangiggs

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量128

点赞数

分类专栏：学习文章标签： css html css3

本文链接：https://blog.csdn.net/pangiggs/article/details/118231289

版权

学习专栏收录该内容

135 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图层的概念</title>
  <link rel="stylesheet" href="tucengstyle.css">

</head>

<body>
<div id="cont">

  <ul>
    <li><img src="img/a.jpg" alt="">  </li>
    <li class="tipTe">  学习的力量来自何方</li>
    <li class="tipBg"></li>
    <li>时间： 2024-01-01</li>
    <li>地点： 月球基地</li>
  </ul>


</div>



</body>
</html>

CSS

#cont{
width: 400px;
 padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}

ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位  */
#cont ul{
position: relative;

}
.tipTe,.tipBg{
position: absolute;
width: 400px;
height: 25px;
top:  341px;
color: white;
}
.tipBg{
background: black;
opacity:0.5;  /*背景透明度  */
}
.tipTe{
z-index: 999;
}