我正在尝试使用混合混合模式来创建具有多重效果叠加的背景，该叠加效果还可以显示部分背景。我还需要子内容不受混合模式的影响。像这样：
我尝试将混合模式设置为取消设置，我也尝试使用隔离/隔离，但似乎无法使该选项起作用。我不想使用伪元素或将内容放置在父元素之外，因为设计器的实际布局有很多内容，我需要它具有响应能力。
到目前为止我已经能够完成的工作：我可以让背景和叠加层正常工作，但影响也适用于内容层：https://codepen.io/orlafitz/pen/JVRQpM 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 -->
有谁知道是否可以实现这一目标？
.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;
}
.overlay {
position: relative;
padding: 50px
}
.background {
background-color: #323ff0;
mix-blend-mode: multiply;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.content {
position: relative;
}
.bkg-image .content h1 {
color: white;
isolation: isloate;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test Blend Modes</title>
</head>
<body>
<h2>Live:</h2>
<div class="bkg-image">
<div class="overlay">
<div class="background"></div>
<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 -->
<h2>Should look like:</h2>
<img class="screencap" src="https://poppyvine.com/wp-content/uploads/2019/04/beach.jpg">
</body>
</html>
混合元素内的任何内容都将被混合，因此它们需要是兄弟元素。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
