html – 使用伪元素创建背景叠加

概述我的目标是拥有任何背景的div,然后使用伪元素来创建透明的白色叠加层,从而“减轻”div的背景.但是,“覆盖”必须在div的内容之下.所以,在下面的例子中： <div class="container"> <div class="content"> <h1>Hello, World</h1> </div></div>.container { backg 我的目标是拥有任何背景的div,然后使用伪元素来创建透明的白色叠加层,从而“减轻”div的背景.但是,“覆盖”必须在div的内容之下.所以,在下面的例子中：

<div >    <div >        <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,但如果这是唯一的解决方案,我可以这样做.

最终目标：文字和蓝色不应覆盖红色.

Js小提琴：http://jsfiddle.net/1c5j9n4x/

解决方法 如果伪元素具有z-index,那么您需要定位.content元素并将z-index值添加到 establish a stacking context.

Updated Example

.content {    background-color: blue;    wIDth: 250px;    position: relative;    z-index: 1;}

你也可以从伪元素中删除z-index,然后只是放置.content元素.在这样做时,这些元素都不需要z-index.这个原因是因为：before伪元素本质上是一个先前的兄弟元素.因此,后续的.content元素位于顶部.

Alternative Example

.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);}

总结

以上是内存溢出为你收集整理的html – 使用伪元素创建背景叠加全部内容，希望文章能够帮你解决html – 使用伪元素创建背景叠加所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。