我需要一些帮助在CSS中重新创建以下内容(如果可能):
这是我目前的进展:
.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,覆盖在它上面的是另一个带有红色背景和mix-blend-mode: multiply
属性的div。看起来颜色混合正常,但我能否使白色文本不受影响,并像示例图中一样呈现为不透明的纯白色?