好的,所以我正在构建一个wordpress网站,有问题的页面可以在这里看到：
http://test.pr-tech.com/power-line-markers/
我遇到的问题是我在我的div容器中使用mix-blend-mode来在背景上使用’lighten’混合.
它完美地工作,但我遇到的问题是,不幸的是容器内的子元素(即文本)也继承了混合模式,因此它也使我的文本“混合”,这不是我想要的(我希望文本没有混合模式).
无论如何,你可以看到我在下面使用的代码：
#category-intro-text {
padding: 0.625em 0.938em;
mix-blend-mode: lighten;
background-color: rgba(220,235,255,0.8); repeat;
}
我试过应用’mix-blend-mode：none;’之类的东西.到文本,但这不起作用.
解决方法
我意识到你刚才问过这个问题,但我今天一直在玩同样的问题,并设法解决这个问题.
将#category-intro-text div中的内容与另一个相对定位的div包装在一起.最终,你会想要将风格添加到你的CSS而不是像我在这里所做的那样内联.
<div id="category-intro-text">
<div style="position: relative;">
<h1>Power Line Markers</h1>
Etc. Etc.
</div>
</div>
然后删除背景颜色并混合您在#category-intro-text div的样式表中获得的信息.你最终应该……
#category-intro-text {
padding: 0.625em 0.938em;
position: relative;
}
最后,使用:: before伪元素添加混合层.
#category-intro-text::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(220,0.8);
mix-blend-mode: lighten;
}
希望能做到这一点.它通过多层来完美地为我工作.
编辑：Here is a Fiddle从前一个答案分叉.
