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

技术标签: 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>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45328723/article/details/124342897

智能推荐

vscode setting.json 全局设置 工作区设置 位置 优先级_vscode中setting.json文件权限排序-程序员宅基地

文章浏览阅读760次。一、全局配置:setting.json文件位于C:\Users\Administrator\AppData\Roaming\Code\User\settings.json二、工作区配置:setting.json文件位于工作区的.vscode\settings.json。_vscode中setting.json文件权限排序

在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "pch.h"”_"在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加”#incude \"pch.h\"?"-程序员宅基地

文章浏览阅读6.8k次,点赞3次,收藏7次。在VS2017 中遇到的错误,VS的解决方案默认使用预编译头。 打开 项目 >>属性页 >>C/C++ >>预编译头,改为不使用预编译头。 不再报错。..._"在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加”#incude \"pch.h\"?"

大数据入门-大数据技术概述(一)-程序员宅基地

文章浏览阅读9.2k次,点赞27次,收藏87次。一、简介Hadoop是Apache软件基金会旗下的一个开源分布式计算平台,为用户提供了系统底层细节透明的分布式基础架构。Hadoop是基于Java语言开发的,具有很好的跨平台特性,并且可以部署在廉价的计算机集群中Hadoop的核心是分布式文件系统HDFS(Hadoop Distributed File System)和MapReduceHadoop被公认为行业大数据标准开源软件,在分布式环境下提供了海量数据的处理能力几乎所有主流厂商都围绕Hadoop提供开发工具、开源软件、商业化工具_大数据入门

PLC数据采集之协议转换桥接器_plc桥接器如何使用-程序员宅基地

文章浏览阅读2k次。数据采集,解决方案,工业互联网_plc桥接器如何使用

Nexus3.x忘记密码处理方式_nfnx3 忘记密码-程序员宅基地

文章浏览阅读410次。书山有路勤为径,学海无涯苦作程序猿????写在前面最近国家在做网络安全攻防演练,很荣幸的我司被选为防守方。随即,公司内部各种平台密码开始加固,所以弱密码都清理干净了。而因为这个,我把Nexus3的用户admin,密码改得很复杂以至于自己都忘了…特此谷歌了N多文章,最终得出以下方案,大家可以参考使用哈密码重置Nexus3若是忘记密码,需要连接到Nexus3的OrientDB控制台进行密码重置,操作方式如下:(声明本人工作目录 NEXUS_HOME:/home/nexus/nexus-3.29.0_nfnx3 忘记密码

git commit 模板配置_git commit设置header body feat-程序员宅基地

文章浏览阅读1.3w次。Git Log 之痛在《The Art of Readable Code》这本经典书中,有个形象的比喻,衡量代码可读性的指标是阅读代码时每分钟的 WTF 次数,而在读 Git 提交历史的时候,不知道你有多少次爆粗口?不相信?你现在打开公司演进最快的项目,执行 git log,信息量过少甚至是误导的 commit message 非常常见,比如:fix =&gt; 这到底是 fix 什么?为..._git commit设置header body feat

随便推点

关于解决Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue-router.js?v=569ce1cd‘ d_unexpected error when starting the router: syntaxe-程序员宅基地

文章浏览阅读3.5k次。1, 按照官方文档我们需要引入VueRouter,但是会报错 大致翻译为:请求的模块/node_modules/.vite/deps/vue-router.js?V =569ce1cd'没有提供名为'default'的导出。// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。因为vue底层代码,导出的时候,使用 export xxx的形式暴露的。routes, // `routes: routes` 的缩写。所以应该写为:以下形式。_unexpected error when starting the router: syntaxerror: the requested module

java.lang.ClassNotFoundException: org.apache.commons.io.output.DeferredFileOutputStream_java.lang.noclassdeffounderror: org/apache/commons-程序员宅基地

文章浏览阅读8.4k次,点赞7次,收藏6次。今天做Spring mvc文件上传遇到这个问题,仔细看了看是否缺少commons-fileupload-1.2.jar。结果发现并没有缺少。 那么问题出在哪里呢?原来是commons-fileupload jar 包从1.0升到1.1的时候。DeferredFileOutputStream.class被移除了。解决这个问题,只需要添加commons-io jar包即可。它里面存在Def_java.lang.noclassdeffounderror: org/apache/commons/io/output/deferredfileout

iphone12promax什么时候上市 iphone12promax是5g 双卡双待吗_iphone12promax是双卡双待吗-程序员宅基地

文章浏览阅读1.1w次。据爆料iPhone12ProMax将于10月12日发布,传闻将在11月发布。iPhone12ProMax配备2688x1242分辨率的6.7英寸(442ppi)超视网膜XDROLED屏幕,支持杜比视界、HDR10+、120Hz刷新率。仍旧采用FaceID,前置摄像头为1200万象(f/2.2)。iphone11 爆降2000 太给力了:https://www.apple.com/11配色方面,iPhone12ProMax将提供深空灰、银色、金色、午夜绿和蓝色,或于iPhone11Pro相似为磨砂质感。_iphone12promax是双卡双待吗

LeetCode --- 1275. Find Winner on a Tic Tac Toe Game 解题报告_leetcode tic-tac-toe-程序员宅基地

文章浏览阅读473次。LeetCode --- 1275. Find Winner on a Tic Tac Toe Game 解题报告_leetcode tic-tac-toe

xargs和管道符 "|"的区别_|与xargs的区别-程序员宅基地

文章浏览阅读2.1k次,点赞4次,收藏6次。区别管道符 将 “|” 之前的命令标准输出,作为之后命令的标准输入。xargs 将上一命令的标准输出,作为后面命令的参数args。举例1 http://blog.csdn.net/x356982611/article/details/77932170echo "--help"|catecho "--help"|xargs cat2find . -name ".java" | grep_|与xargs的区别

江苏c语言编程题格式,江苏计算机二级C语言上机编程预测7大题-程序员宅基地

文章浏览阅读76次。计算机内容一、特殊数:素数平方是各位数不相同的数二、495三位陷阱数三、可分解的整数四、闰年计算题五、数制变换题六、水仙花数题七、亲密数或和亲数一、特殊数:素数平方是各位数不相同的数编程题(24分)参考2006秋C02编程题和网上资料编写【程序功能】在给定的范围内查找满足特定条件的整数。【编程要求】编写函数int find(long n1,long n2,long x[])。函数功能:在n1~n2..._编写main函数,声明一个字符数组并用考生本人的准考证号码作初始化,调用函数makenu

推荐文章

热门文章

相关标签