z-index

图层~ z-index：

默认是0，最高无上限~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
  <ul>
    <li><img src="images/img.png" alt=""></li>
    <li class="tipText">晚安</li>
    <li class="tipBg"></li>
    <li>时间：2022-3-3</li>
    <li>地点：比基堡</li>
  </ul>
</div>

</body>
</html>

opacity: 0.5;/背景透明度/

#content{
    width: 420px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 420px;
    height: 22px;
    top: 242px;
}
.tipText{
    color: white;
    /*z-index: 999;*/
}
.tipBg{
    background: black;
    opacity: 0.5;/*背景透明度*/
    filter: alpha(opacity=50);/*ie8及更早的版本支持*/
}

 

posted @ 2022-04-12 00:00  少时凌云志  阅读(39)  评论(0)    收藏  举报