混合混合模式背景与子内容不受影响

Question

混合混合模式背景与子内容不受影响

4

我试图使用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 -->

有没有人知道是否可以实现这个功能？

- orlafitz

1

为什么不使用伪元素？ - Joykal Infotech

2个回答

2

作为我在最初的回答中已经解释过的那样，隔离不会起作用，您不能在应用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>

另一个相关的问题：如何使用CSS混合模式进行隔离：防止元素与父元素混合

使用伪元素的解决方案：在保持文本不透明的情况下混合模式相乘？

原始答案：最初的回答。

- Temani Afif

谢谢 - 我曾尝试使用background-blend-mode，但无法让边距起作用 - 使用background calc完全解决了这个问题，而且更加简单明了！另外谢谢您提供的额外链接 - 它们真的很有帮助 :-)! - orlafitz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eran Goldin · Accepted Answer

.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>

混合元素内的任何内容都将被混合，因此它们需要是同级元素。