我的目标是拥有任何背景的div,然后使用伪元素来创建透明的白色叠加层,从而“减轻”div的背景.但是,“覆盖”必须在div的内容之下.所以,在下面的例子中：
- <div class="container">
- <div class="content">
- <h1>Hello,World</h1>
- </div>
- </div>
- .container {
- background-color: red;
- width: 500px;
- height: 500px;
- position: relative;
- }
- .content {
- background-color: blue;
- width: 250px;
- }
- .container::before {
- content:"";
- display: block;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 1;
- background-color: rgba(255,255,.8);
- }
.content div不应该是“下面”的白色叠加层,也就是.container :: before.
我不喜欢在.content上使用z-index,但如果这是唯一的解决方案,我可以这样做.
最终目标：文字和蓝色不应覆盖红色.
解决方法
如果伪元素具有z-index,那么您需要定位.content元素并将z-index值添加到
establish a stacking context.
- .content {
- background-color: blue;
- width: 250px;
- position: relative;
- z-index: 1;
- }
你也可以从伪元素中删除z-index,然后只是放置.content元素.在这样做时,这些元素都不需要z-index.这个原因是因为：before伪元素本质上是一个先前的兄弟元素.因此,后续的.content元素位于顶部.
- .content {
- background-color: blue;
- width: 250px;
- position: relative;
- }
- .container::before {
- content:"";
- display: block;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- background-color: rgba(255,.8);
- }
