mix-blend-mode 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정한다
포토샵의 blend와 유사한 기능을 보여준다
/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
/* Global values */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;
지원
https://caniuse.com/?search=mix-blend-mode
반응형
'Web story > CSS' 카테고리의 다른 글
@media (hover: hover) (0) | 2023.06.02 |
---|---|
isolation: isolate (0) | 2023.06.02 |
랜더링 성능을 향상 시키는 새로운 CSS 속성 content-visibility (0) | 2020.10.08 |
CSS flexible 레이아웃: flex item의 정렬과 간격 (0) | 2017.05.12 |
8000px border (0) | 2014.11.01 |