我需要一些帮助在CSS中重新创建这个（如果可能的话）:
到目前为止，我所得到的是:
null
.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>null
有一个有背景图像的div和叠加的div是另一个有红色bg颜色和mix-blend-mode:multiply的div。 看起来颜色混合是正确的工作，但有没有一种方法，我可以使白色文本不受影响和一个不透明的纯白色像在示例图像？
您可以使用伪元素并对其应用mix-blend-mode:multiply:
null
.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>