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

혼합 모드는 일반적으로 배경 이미지로 사용된다. 결과는 다음 등 '화면'또는 '어둡게'같은에 혼합 모드를 변경하면 사진 층 상에 단색으로 층을 것이다 포토샵에서 블렌드 모드와 유사하다

한 예는 다음과 같습니다

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