CSS之隐藏与显示遮罩层

阿斯乐Code

已于 2022-07-05 14:21:59 修改

阅读量1.3k

点赞数 2

分类专栏： css 文章标签： css css3 html

于 2022-07-05 12:49:15 首次发布

本文链接：https://blog.csdn.net/weixin_45707229/article/details/125617207

版权

本文介绍了CSS中控制元素显示与隐藏的方法，包括display:none、display:block、visibility:hidden、visibility:visible以及overflow属性的使用。重点讲解了如何通过display属性实现隐藏不占位的效果，以及visibility属性在隐藏元素时保持位置不变的特点。同时，提到了overflow属性在处理溢出内容时的滚动条控制。文章以模拟视频播放软件的交互为例，展示了CSS3在实现高级效果上的优势，如伪元素选择器的应用，用于创建新内容并简化HTML结构。通过::before和::after，可以在元素前后插入内容，实现更复杂的布局和交互设计。

摘要由CSDN通过智能技术生成

display：

display: none 隐藏后不占有原来的位置

display:block 也有显示元素的意思

visibility:

hidden 隐藏；（隐藏后继续占有原来的位置）

visible 显示；

inherit 继承父对象的可见性。

overflow：

visible 默认显示溢出部分

hidden 隐藏溢出部分

scroll 溢出的部分显示滚动条

auto 有溢出内容时显示滚动条，没有溢出时不显示滚动条

有position定位的盒子要慎用溢出隐藏

案例：
模拟视频播放软件，鼠标悬停在图片上时，显示可以点击播放的按钮，离开时恢复正常图片。

  <style>
        .box4 {
     
            position: relative;
            width: 450px;
            height: 255px;
        }
        .box4 img {
     
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .mask{
     
            display: none;
            /* 多个有position的盒子，后面写的在最上面（后来居上），mask会在img之上 */
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
        }
        .box5 {
     
            display: none;
            position: absolute;
            left: 50%;
            margin-left: -25px;
            top: 50%;
            margin-top