CSS布局基础（九）（元素隐藏显示之 display ， visibility，overflow 区别 & 盒子遮罩层实现的几种方式）

01空间

已于 2023-09-21 11:54:04 修改

阅读量304

点赞数

分类专栏：前端文章标签： css 前端

于 2023-05-04 00:20:41 首次发布

本文链接：https://blog.csdn.net/tergou/article/details/130473539

版权

前端专栏收录该内容

22 篇文章 3 订阅

订阅专栏

display 和 visibility 区别 & 盒子遮罩层实现的几种方式

元素隐藏显示之 display ， visibility，overflow 区别

相同点

三者都能控制元素的显示与隐藏

display: block|none;
visibility: visible|hidden;
overflow: visible（溢出内容直接显示，但优先级较低，被普通流覆盖）
 | hidden（不显示溢出部分）
 | auto （溢出时，以滚动条方式处理，不溢出时，无滚动条）;
 | scroll （总是展示滚动调，即使没有溢出）

不同点

display 关注的元素的展示方式，隐藏只是其中一种形式，而且隐藏后不占据空间
visibility 仅仅用于设置元素是否可见，而且隐藏后依然占据空间
overflow 设置的溢出盒子的那一部分内容是否显示，溢出隐藏的部分不会影响布局，那一部分的 z-index 优先级很低，会被普通流挡住，默认为溢出显示 visible

开启定位的盒子，慎用 overflow：hidden；可能会导致定位溢出的部分无法显示

opacity 渐进式隐藏显示

本意是透明度的设置，这个属性配合过渡切换比较柔和。
opacity: 0;全透明
opacity: 1;不透明

隐藏显示案例——盒子遮罩层

html 几种实现方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>盒子遮罩层实现方式</title>
        <style>
            .box {
                position: relative;
                width: 228px;
                height: 155px;
                margin: 100px auto;
            }

            .box img {
                width: 100%;
                height: 100%;
            }

            .box .shadow {
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                width: 100%;
                height: 100%;
                background: url("https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8") no-repeat center rgba(0, 0, 0, 0.2);
            }

            .box:hover .shadow {
                z-index: 1;
                /*display: block;*/
            }

            .box:hover {
                cursor: no-drop;
            }



            .box2 {
                position: relative;
                width: 228px;
                height: 155px;
                margin: 100px auto;
            }

            .box2 img {
                width: 100%;
                height: 100%;
            }
            .box2::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background: url("https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8") no-repeat center rgba(0, 0, 0, 0.2);
            }

            .box2:hover::before{
                z-index: 1;
            }

            
            .box3 {
                position: relative;
                width: 228px;
                height: 155px;
                margin: 100px auto;
            }

            .box3 img {
                width: 100%;
                height: 100%;
            }
            .box3::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: none;
                background: url("https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8") no-repeat center rgba(0, 0, 0, 0.2);
            }

            .box3:hover::before{
                display: block;
            }

            .box4 {
                position: relative;
                width: 228px;
                height: 155px;
                margin: 100px auto;
            }

            .box4 img {
                width: 100%;
                height: 100%;
            }
            .box4::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                visibility: hidden;
                background: url("https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8") no-repeat center rgba(0, 0, 0, 0.2);
            }

            .box4:hover::before{
                visibility: visible;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" alt="">
            <div class="shadow"></div>
        </div>
        <div class="box2">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" alt="">
        </div>

        <div class="box3">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" alt="">
        </div>
        <div class="box4">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" alt="">
        </div>
    </body>
</html>