问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

能不能纯 css+伪元素覆盖元素？

头像
WingDust
    236278214
    
<div style="width:300px;height:200px" class=""></div>
// 只添加一个伪元素 且不使用css中的定位 能不能让伪元素覆盖这个元素

    覆盖: 就是这个伪元素在这个div之上，且高宽一样

    css3
    阅读 3.1k
    2 个回答
    得票最新
    头像
    陟上晴明
      22k145391

      如果里面没有内容的话，可以直接使用 width:100%;height100%; 这样来做。
      image.png

      如果里面有一些内容，需要用伪类来覆盖，那么就需要用到 position:absolute 了。
      image.png

      头像
      ezmo
        7.3k2633

        基本原理就是使用 ::afeter 或 ::before 作为遮罩层，设定为绝对定位，宽高要能相对于被遮罩层保持一致，所以还需被遮罩层（#testdiv）的定位设置为 position:relative。

        以下是完整代码

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>测试用伪类遮罩</title>
    <link rel="stylesheet" href="">
    <style>
        #testdiv::after {
            content:'';
            position:absolute;
            background:#2f2f2f;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            z-index:1;
        }
    </style>
</head>
<body>
    <div style="width:300px;height:200px; background-color: red; position: relative;" class="" id="testdiv"></div>
</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题