22、z-index及透明度

最新推荐文章于 2024-09-05 10:06:52 发布

工一木子

最新推荐文章于 2024-09-05 10:06:52 发布

阅读量130

点赞数

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

本文链接：https://blog.csdn.net/Prince140678/article/details/120393756

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

6.4、z-index

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lRkh16bX-1632132797828)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\22、z-index及透明度.assets\image-20210920180059949.png)]$

图层：

z-index:默认是0，最高无限一般写0-999

核心代码：

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div>
            <ul>
                <li><img src="images/bg.jpg" alt=""></li>
                <li class="tipText">学习微服务，找工一</li>
                <li class="tipBg"></li>
                <li>时间：2099-01-01</li>
                <li>地点：月球一号基地</li>
            </ul>
        </div>
    </body>
</html>

css

#content {
    width:380px;
    padding:0px;
    margin:0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}

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

.tipText,.tipBg {
    position: absolute;
    width:380px;
    height: 25px;
    top:216px;
}
.tipText {
    color:white;
    z-index: 0;
}
.tipBg {
    background: #000;
    opacity: 0.5;/*背景透明度*/
    filter:Alpha(opacity=50);
}

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iSTNpO9l-1632132797831)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\22、z-index及透明度.assets\image-20210920181149218.png)]$

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
22、z-index及透明度

6.4、z-index图层：z-index:默认是0，最高无限一般写0-999核心代码：index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"&
复制链接

扫一扫

专栏目录