z-index及透明度

z-index

图层~
z-index：默认是0，最高无线~999

<!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/wsh2.jpg" alt="" /></li>
        <li class="tipText">一起学习Java!</li>
        <li class="tipBG"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>
</body>
</html>

opacity: 0.5; /背景透明度/

#content{
    width: 380px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBG{
    position: absolute;
    width: 380px;
    top: 216px;
}
.tipText{
    color: white;
    z-index:999;
}
.tipBG{
    /*背景透明度*/
    opacity: 0.5;
    background: #000;
    filter: Alpha(opacity=50);
}
posted @ 2022-02-11 17:43  摘星丶仙  阅读(28)  评论(0)    收藏  举报