我正在为我们的一位客户制作网站。我们的设计师使用 blending: multiply 因为现在它可以在 CSS 中完成。我已经在网站上实现了它,但我无法获得请求的结果,只是想问问你们是否可能。
情况是这样的:我有一个带有背景图片的大标题。在该标题的顶部 float 了一个具有 mix-blend-mode: multiply 的圆形 div。这按需工作,但在此 div 中有文本也被混合。我可以保持此文本“未混合”吗?
想要的效果:
现在是什么:
提前致谢!
最佳答案
使用伪元素并将混合模式应用到它而不是父 div。
div.header {
width: 100%;
height: 300px;
background-image: url(http://www.eikongraphia.com/wordpress/wp-content/BIG_Zira_Island_Copyright_BIG_1_Small.jpg);
}
div.info-bol {
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
position: relative;
}
div.info-bol::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-color: red;
mix-blend-mode: multiply;
}
div.info-bol span {
position: relative;
top: 22%;
font-size: 30px;
font-weight: bold;
color: white;
}
<div class="header">
<div class="info-bol">
<span>samenwerken<br>is meer dan<br>samen<br>werken</span>
</div>
</div>
关于html - "Exclude text from blending"CSS 混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37004913/