Css-遮罩层_遮罩层css-程序员宅基地

遮罩层原理
利用一个全屏、半透明的div遮住页面上其它元素

<style>
        .tudou {
    
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

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

        .mask {
    
            /* 隐藏遮罩层 */
            display: none;
            /* 子绝父相 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4) url(../img/down.jpg) no-repeat center;
        }

        /* 当我们鼠标经过 土豆这个盒子，就让里面遮罩层显示出来 */
        .tudou:hover .mask {
    
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="../img/tudou.jpg" alt="">

    </div>

使用伪元素选择器后减少了HTML界面的冗余


<style>
        .tudou {
    
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

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

        .tudou::before {
    
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            /* 子绝父相 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4) url(../img/down.jpg) no-repeat center;
        }

        /* 当我们鼠标经过 土豆这个盒子，就让里面遮罩层显示出来 */
        .tudou:hover::before {
    
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="../img/tudou.jpg" alt="">

    </div>
</body>

本文链接：https://blog.csdn.net/weixin_45328723/article/details/124342897

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

【Elasticsearch＜一＞✈️✈️】简单安装使用以及各种踩坑

本地实现 Elasticsearch、kibana 管理工具、IK 分词器的安装部署以及初步使用（以及填坑策略）

Word插件开发

创建一个新的 Office 插件项目：在 Visual Studio 中，选择"文件" -> “新建项目”，然后在模板中选择"Office/SharePoint"，选择适当的 Office 插件项目模板，如 Word 插件、Excel 插件或 PowerPoint 插件。设计用户界面：在解决方案资源管理器中，打开你的插件项目，并在其中打开相应的 Office 文件（如 Word 文件、Excel 文件或 PowerPoint 文件）。你可以在 Office 应用中测试插件的功能，并在开发过程中进行调试。

随便推点

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp