CSS混合模式无法工作

Question

我想尝试使用CSS混合模式属性，但是当我应用规则时好像什么都没有发生。我做错了什么吗？我已经将隔离规则应用于父元素，并将混合模式应用于我想要操作的元素。以下是代码和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>
                     

谢谢

- Alessio

---

你能解释一下你想要实现什么，以及你期望发生什么吗？可以提供一张截图吗？ - Gurtej Singh

它是有效的，你只需要使用颜色使差异更加“视觉化”...在图像或多彩背景上尝试它，这就是它的用途。 - Asons

@GurtejSingh 没有特别的要求，只是想检查一下是否可以通过该属性实现一个漂亮的外观！ - Alessio

@LGSon 我会尝试的！谢谢。 - Alessio

Answer 1

您所编写的代码可以正常工作，但由于您选择的颜色，效果并不明显。您使用的混合模式属性在背景图像上使用时效果最佳。您可以结合使用背景图像和背景颜色属性。一个示例是：

<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;
}

您还可以查看我们的一篇有趣的文章（这里），它可能有助于进一步解释该属性。

- Nesha Zoric

Answer 2

混合模式通常与背景图片一起使用。其结果类似于Photoshop中的混合模式，您可以在照片图层上放置一个纯色图层，然后将混合模式更改为“屏幕”或“变暗”等。

一个例子是：

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

- Jason Y

---

是的，但我只是想尝试使用颜色，而不是混合图像和颜色。 - Alessio