如何在保持文本不透明的同时应用混合混合模式? [英] How to apply mix-blend-mode while keeping text opaque?

问题描述

我需要一些帮助(如果可能)在CSS中重新创建它:

I need some help recreating this in CSS (if possible) :

这是我到目前为止所拥有的:

And here is what I have so far:

.bg {
  background-image: url('https://images.unsplash.com/photo-1501706362039-c06b2d715385?auto=format&fit=crop&w=1070&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
  background-repeat: no-repeat;
  background-position: center center;
  padding: 100px 50px;
}

.text {
  background: #ed1c24;
  mix-blend-mode: multiply;
}

.text p {
  font-family: "Helvetica";
  font-weight: bold;
  font-size: 32px;
  color: #fff;
  margin: 0;
  padding: 40px;
}

<div class="bg">
  <div class="text">
    <p>
      These artistic movements were a refelection of the million of people who lived and worked here. To them, "I ❤ NY" could be read as a rallying cry.
    </p>
  </div>
</div>

有一个具有背景图像的div，并且该div上覆盖的是另一个具有红色bg颜色和mix-blend-mode: multiply的div.看起来颜色混合正常工作，但是有没有办法使我的白色文本不受影响以及像示例图像中一样不透明的纯白色?

There is a div with a background image and overlaying that div is another one with a red bg color and mix-blend-mode: multiply on it. It looks like the color blend is working correctly, but is there a way that I can make the white text be unaffected and an opaque solid white like in the example image?

推荐答案

您可以使用伪元素并像这样在其上应用mix-blend-mode: multiply:

You may use pseudo element and apply mix-blend-mode: multiply on it like this :

.bg {
  background-image: url('https://images.unsplash.com/photo-1501706362039-c06b2d715385?auto=format&fit=crop&w=1070&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
  background-repeat: no-repeat;
  background-position: center center;
  padding: 100px 50px;
}

.text {
  position: relative;
}

.text:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #ed1c24;
  mix-blend-mode: multiply;
  z-index: 0;
}

.text p {
  font-family: "Helvetica";
  font-weight: bold;
  font-size: 32px;
  color: #fff;
  margin: 0;
  padding: 40px;
  z-index: 2;
  position: relative;
}

<div class="bg">
  <div class="text">
    <p>
      These artistic movements were a refelection of the million of people who lived and worked here. To them, "I ❤ NY" could be read as a rallying cry.
    </p>
  </div>
</div>

这篇关于如何在保持文本不透明的同时应用混合混合模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！