混合混合模式背景与子内容不受影响 [英] Mix blend mode background with child content unaffected

问题描述

我正在尝试使用混合混合模式创建一个具有倍增效果叠加层的背景，该叠加层还可以显示部分背景.我还需要子内容不受混合模式的影响.像这样:

我尝试将blend-mode设置为unset，我也尝试使用隔离/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 -->   

有人知道是否有可能实现这一目标?

解决方案

正如我在先前的答案中已经解释的那样，隔离将无法通过这种方式工作，并且在应用mix-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混合混合模式进行隔离:如何防止元素与父代混合

使用伪元素的解决方案:混合混合模式在保持文本不透明的同时乘法?

I am trying to use mix-blend-mode to create a background with a multiply effect overlay that also reveals part of the background. I also need the child content not to be affected by the blend mode. Like this:

I've tried setting the blend-mode to unset, I've also tried using isolation / isolate but can't seem to get that option to work. I don't want to use pseudo elements or placing the content outside of the parent element as the actual layout from the designer has a lot of content and I need it to be responsive.

What I've been able to get working so far: I can get the background and overlay working but the affect applies to the content layer also: 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 -->  

Does anyone know if it is possible to achieve this?

解决方案

As I already explained in this previous answer, isolation will not work this way and you cannot isolate the content after applying mix-blend-mode

On idea of fix is to consider background-blend-mode with multiple background. This will only affect the background and not the content and you will have a reduced code.

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

Another related question: Isolation with CSS Mix-Blend-Modes: how to prevent elements from blending with parent

The solution using pseudo element: Mix blend mode multiply while keeping text opaque?

这篇关于混合混合模式背景与子内容不受影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！