我试图使用mix-blend-mode创建一个带有乘法效果叠加的背景,同时也揭示了部分背景。 我还需要子内容不受混合模式的影响。像这样:
我尝试将blend-mode设置为unset,也尝试使用isolation/isolate,但好像无法使该选项起作用。我不想使用伪元素或将内容放在父元素之外,因为设计师的实际布局包含大量内容,而且我需要它具有响应性。
到目前为止我已经能做到的: 我可以让背景和叠加效果工作,但影响到了内容层: https://codepen.io/orlafitz/pen/JVRQpM
.bkg-image {
background-image: url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg);
text-align: center;
padding: 100px 0px;
background-size: cover;
background-position: center;
}
.multiply-overlay {
background-color: #323ff0;
mix-blend-mode: multiply;
padding: 50px
}
.bkg-image .content {
color: #fff;
isolation: isolate;
}
<div class="bkg-image">
<div class="multiply-overlay">
<div class="content">
<h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
</div><!-- content -->
</div><!-- multiply-overlay-->
</div><!-- bkg img -->
有没有人知道是否可以实现这个功能?