css를 이용한 이미지 multiply 효과 주기

CSS를 이용한 이미지 multiply 기능 주기

적용 필요 조건으로는 같은 위치에 있는 두개의 이미지 (겹친 이미지) 에서 적용 가능하며 여러가지 활용이 가능함

CSS의 mix-blend-mode 속성을 사용하여 이미지에 “multiply” 효과를 적용할 수 있습니다. “multiply” 효과는 이미지와 배경을 곱셈하는 방식으로 합성하여 새로운 이미지를 생성합니다.

<div class="img_box">
<img src="./이미지1" /> 
<img class="effiect" src="./이미지2" />
</div>
/* 이런 구조 형태 */

※ 각 적용 CSS 형태

.img_box img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}
.img_box img.effiect{
mix-blend-mode:multiply;
filter:contrast(1.5);
}