html-css的蒙版大法

最新推荐文章于 2022-10-02 15:54:59 发布

Void_CM

最新推荐文章于 2022-10-02 15:54:59 发布

阅读量2.2k

点赞数 1

分类专栏： Html+CSS+js 文章标签： css html

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113594343

版权

Html+CSS+js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

当导航栏的文字颜色与banner颜色相近看不清时。可以考虑蒙版大法
以下为示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>mask</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: Helvetica Neue, sans-serif;
        }
        .mask{
            position: absolute;
            background: black;
            opacity: 0.5;
            width: 100%;
            height: 200px;
        }

        header{
            background-color: blanchedalmond;
            width: 100%;
            height: 400px;
        }
        li{
            position: relative;
            z-index: 2;
            margin-right: 60px;
            display: inline-block;
            /* background-color: gray; */
            width: 100px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        a{
              text-decoration: none;
            color: white;
            font-size: 20px;
            
        }
    </style>
</head>
<body>
    <div class="mask">
        
    </div>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a> </li>
                <li><a href="#">Content</a></li>
                <li><a href="#">Directions</a></li>
                <li><a href="#">Address</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

html+css蒙版

1设定蒙版的大小并使用absolute将其剥离

 .mask{
            position: absolute;
            background: black;/*黑色蒙版*/
            opacity: 0.5;/*透明度*/
            width: 100%;
            height: 200px;
        }

由于蒙版是一个新div它覆盖在了导航栏上方，而导致无法对导航栏进行点击
所以，使用z-index属性将其置于最上方。
这里有个坑，z-index属性对默认的position无效，所以本例中将z-index和position:relative配套使用

2将导航栏的item使用z-index属性置于顶层

 li{
            position: relative;
            z-index: 2;
            margin-right: 60px;
            display: inline-block;
            /* background-color: gray; */
            width: 100px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

Void_CM

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html-css的蒙版大法

当导航栏的文字颜色与banner颜色相近看不清时。可以考虑蒙版大法以下为示例：<!DOCTYPE html><html lang="en"><head> <title>mask</title> <style> *{ margin: 0; padding: 0; } body{ font-fami
复制链接

扫一扫