混合模式背景与不受影响的子内容混合
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了混合模式背景与不受影响的子内容混合相关的知识，希望对你有一定的参考价值。
我正在尝试使用混合混合模式来创建具有乘法效果叠加的背景，该叠加也会显示部分背景。我还需要不受混合模式影响的子内容。像这样：
我已经尝试将混合模式设置为取消设置，我也尝试使用隔离/隔离但似乎无法使该选项工作。我不想使用伪元素或将内容放在父元素之外，因为设计师的实际布局有很多内容，我需要它才能响应。
到目前为止我能够得到的工作：我可以获得背景和叠加效果，但影响也适用于内容层：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 --> 有谁知道是否有可能实现这一目标？
答案
正如我在this previous answer中已经解释的那样，隔离不会以这种方式工作，你应用mix-blend-mode后无法隔离内容
关于修复的想法是考虑具有多个背景的background-blend-mode。这只会影响背景而不影响内容，您将减少代码。
.bkg-image {
background:
linear-gradient(#323ff0,#323ff0) center/100% calc(100% - 100px) no-repeat,
url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg) center/cover;
text-align: center;
background-blend-mode: multiply;
padding: 100px 0px;
}
.bkg-image .content {
color: #fff;
}<div class="bkg-image">
<div class="content">
<h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
</div>
</div>另一答案
.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> 以上是关于混合模式背景与不受影响的子内容混合的主要内容，如果未能解决你的问题，请参考以下文章