019z-index：默认是0，最高无限~ 999和opacity:0.5 /背景透明度

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <link rel="stylesheet" href="./024.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../../image/blank.jpg" alt=""></li>
        <li class="tipText">学习JAVA</li>
        <li class="tipBg"></li>
        <li>时间：future</li>
        <li>地点：火星</li>
    </ul>
</div>
</body>
</html>
#content{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #5f91d6 solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 216px;
}
.tipText{
    color: #c2ffdb;
    z-index: 0;
}
.tipBg{
    background: #000000;
    opacity: 0.5;/*背景透明度*/
    filter: Alpha(opacity=50);
}
img{
    width: 300px;
    height: 300px;
}

 

运行结果：

 

posted @ 2021-08-14 14:02  李林林  阅读(135)  评论(0)    收藏  举报