元素的显示与隐藏（display+visibility+overflow）+遮罩层案例

最新推荐文章于 2023-05-30 16:14:02 发布

夏大爷耶耶耶

最新推荐文章于 2023-05-30 16:14:02 发布

阅读量354

点赞数 1

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

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121443569

版权

杂专栏收录该内容

44 篇文章 2 订阅

订阅专栏

1.display显示隐藏元素

display属性用于设置一个元素应如何显示。

·display: none; 隐藏对象

·display: block; 除了转换为块级元素之外，同时还有显示元素的意思。

display隐藏元素后，不再占有原来的位置。

2.visibility显示隐藏元素（可见性）

visibility属性用于指定一个元素应可见还是隐藏。

·visibility: visible; 元素可视

·visibility: hidden; 元素隐藏

visibility隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用visibility: hidden

如果隐藏元素不需要原来位置，就用display: none(用处更多重点)

3.overflow溢出显示隐藏

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。

属性值描述

visible 不剪切内容也不添加滚动条

hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll 不管超出内容否，总是显示滚动条

auto 超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow: hidden; 因为它会隐藏多余的部分。

案例：遮盖层👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标经过显示遮盖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

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

        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(images/person.png) no-repeat center;
        }

        /* 鼠标经过盒子就让遮罩层显示出来 */
        .box:hover .mask {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 1.练习元素的显示与隐藏
    2.练习元素的定位
    核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子就显示出来。
    遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。 -->
    <div class="box">
        <div class="mask"></div>
        <img src="images/03.jpg" alt="">
    </div>
</body>
</html>

夏大爷耶耶耶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的显示与隐藏（display+visibility+overflow）+遮罩层案例

1.display显示隐藏元素display属性用于设置一个元素应如何显示。·display: none; 隐藏对象·display: block; 除了转换为块级元素之外，同时还有显示元素的意思。display隐藏元素后，不再占有原来的位置。2.visibility显示隐藏元素（可见性）visibility属性用于指定一个元素应可见还是隐藏。·visibility: visible; 元素可视·visibility: hidden; 元素隐藏visibility隐藏
复制链接

扫一扫