css - 将混合模式与 2 个重叠的 div 混合，但需要排除文本

Question

我正在 flex 2 个元素，它们大约重叠 25%。 使用 mix-blend-mode，它很好地混合了背景，也混合了文本。

JS fiddle 就在这里:https://jsfiddle.net/simohell/q9breg60/

我尝试使用::before 来应用 mix-blend 模式，但我无法弄明白。

.wrapper {
  display: flex;
}

.text {
  margin-top: 30px;
  flex: 0 0 50%;
  padding: 30px;
  background-color: rgba(17, 38, 59, .95);
  mix-blend-mode: multiply;
}

h1,
p {
  color: #fff;
}

.image {
  flex: 0 0 75%;
  margin-left: -25%;
  background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
  background-size: cover;
  mix-blend-mode: multiply;
}

<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
  <div class="image">&nbsp;</div>
</div>

Answer 1

将文本的背景移至主包装，然后增加其 z-index 以允许图像仅与背景混合。主要技巧是调整渐变的大小以仅模拟文本的相同背景:

.wrapper {
  display: flex;
  background:
    linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95)) 
    bottom left/ 
    50% /*widh:50% */
    calc(100% - 30px) /*height:100% - top margin */
    no-repeat;
}

.text {
  margin-top: 30px;
  flex: 0 0 50%;
  padding: 30px;
  z-index:2;
}

h1,p {
  color: #fff;
}

.image {
  flex: 0 0 75%;
  margin-left: -25%;
  background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
  background-size: cover;
  mix-blend-mode: multiply;
}

body {
 margin:0;
}

* {
  box-sizing:border-box;
}

<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
  <div class="image">&nbsp;</div>
</div>

您还可以将图像移动到主包装器的背景并考虑 background-blend-mode。您还将获得简化的代码:

.wrapper {
  overflow:auto;
  background:
  url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80") 
    center/cover content-box,  
  linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95)) 
    bottom left/ 
    50% /*widh:50% */
    calc(100% - 30px) /*height:100% - top margin */
    no-repeat;
  padding-left:25%;
  background-blend-mode: multiply;
}
.text {
  margin-top: 30px;
  width:66.6%; /* we added 25% of padding so we need 66.6% from 75% to get 50%*/
  margin-left:-33.4%; /* we shift back by the added margin 25% (33.4% of 75%)*/
  padding: 30px;
}
h1,p {
  color: #fff;
}

body {
 margin:0;
}

* {
  box-sizing:border-box;
}

<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
</div>