我想尝试使用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>
谢谢