混合混合模式与 2 个重叠 div 但需要排除文本答案

【问题标题】：Mix blend mode with 2 overlapping divs but need to exclude the text混合混合模式与 2 个重叠 div 但需要排除文本
【发布时间】：2019-07-24 13:35:08
【问题描述】：

我正在弯曲 2 个元素，它们重叠了大约 25%。使用混合混合模式，它可以很好地混合背景，也可以混合文本。

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

我尝试使用 ::before 来应用混合混合模式，但我无法弄清楚。

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

【问题讨论】：

标签： css mix-blend-mode

【解决方案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>

【讨论】：