CSS混合模式不起作用

Question

我想使用CSS blend mode属性，但是当我应用规则时似乎什么也没发生。

难道我做错了什么？ 我已经将隔离规则应用于父级，并将mix-blend-mode应用于了我要使用的元素。

这是代码和codepen示例 。

 .day-old { position: relative; isolation: isolate; } .day-old:before { position: absolute; top: 0; left: 0; display: block; width: 99.9%; height: 38px; content: ""; background: rgba(0, 0, 0, 0.5); z-index: -1; } .day-old .day-row { opacity: 0.5; } .day-row { display: -ms-flexbox; display: flex; width: 100%; } .day { background: #f5f5f5; margin: 0; } .day span { display: block; padding: 10px; } .availability { display: flex; width: 100%; text-align: center; margin: 0; } .slot { display: block; padding: 10px 0; color: #3c763d; background: #dff0d8; width: 100%; box-shadow: -1px 0px 0px #c7d9b9 inset, 0px -1px 0px #c7d9b9 inset; mix-blend-mode: screen; } 

 <div class="day-old"> <div class="day-row"> <p class="inner day"><span><strong>13/04</strong></span></p> <p class="availability"> <span class="slot"> <strong>2500</strong> </span> </p> </div> </div> 

谢谢

Answer 1

您编写的代码正在运行 ，但是由于您选择的颜色，效果似乎不太明显。 与背景图像一起使用时，您使用的mix-blend-mode属性可以达到最佳效果。 您可以结合使用背景图像和背景颜色属性 。 一个例子是：

<div class=”container”>
  <h1 class=”header-text”>Hello world</h1>
</div>

.container {
  background-image: url(‘image.png’);
  background-size: cover;
}

.header-text {
  font-size: 7rem;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background-color: darkcyan;
  mix-blend-mode: multiply;
}

您也可以在此处查看我们的有趣文章，这可能有助于进一步解释该属性。

Answer 2

混合模式通常用于背景图像。 结果类似于Photoshop中的混合模式，在混合模式中，您将在照片层上具有纯色图层，然后将混合模式更改为“屏幕”或“暗”等。

一个例子是：

.foo {
  background-image: url(trees.jpg);
  background-color: green;
  background-blend-mode: screen;
}