CSS混合模式不工作

Question

我想玩CSS混合模式属性，但它似乎没有什么事情发生时，我应用规则。

我做错了什么？我已将隔离规则应用于父级，并将混合混合模式应用于要玩的元素。

这是代码和codepen example。

.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

混合模式通常用于与背景图像。结果类似于在Photoshop中的混合模式，你将不得不与纯色层上的光层，然后改变混合模式，以类似“屏幕”或“变暗”等

一个例子是：

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