猿问

如何让伪元素里的背景色不遮住元素本身的内容

579f4f080001680803740302.jpg

579f4f080001ca3c05000142.jpg

写了一个header header设置了背景图片 而且、header里面有内容 给header设置了一个伪元素目的是让header的背景图片上覆盖一层有透明度的颜色 但是加了伪元素之后发现header里的内容被伪元素的透明度的颜色遮住了

怎那样才能不让内容被伪元素遮住


PS:效果图传了N便都传不上来QAQ

李下之忌心中郁
浏览 5404回答 2
2回答

woshiajuana

z-index 想起作用的话,需要把元素设置成定位元素

脑阔疼

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .test{ width: 100px; height: 100px; background:#f00; margin: 100px auto; } .test::after{ content: ""; display: block; width: 100px; height: 100px; background-color: #00f; opacity: 0.6; } </style> </head> <body> <div class="test"> 12312123 </div> </body></html>亲测可行啊~你是不是因为0.85效果不明显看不出来
随时随地看视频慕课网APP
我要回答