Gitsunmin

TIL

TIL
(=Today I Learned)

Backdrop Filter

CSS에 배경에 깔린 색상 또는 이미지에 Filter를 입혀주는 속성입니다.

사용법

기본적으로 아래와 같이 사용하며, 다양한 속성을 제공하고 있습니다.

background-image: url('image.jpg');
backdrop-filter: blur(10px);

또, 여러 속성을 복합적으로 사용할 수 있습니다.

background-image: url('image.jpg');
backdrop-filter: blur(10px) brightness(0.5);

그리고 컬러 적용 처럼 global 속성에 따라서 적용되는 속성이 다릅니다.

backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

속성

url( <string> <url-modifier>_ ) |
src( <string> <url-modifier>_ )

blur( <length>? )

brightness( [ <number> | <percentage> ]? )

contrast( [ <number> | <percentage> ]? )

drop-shadow( [ <color>? && <length>{2,3} ] )

grayscale( [ <number> | <percentage> ]? )

hue-rotate( [ <angle> | <zero> ]? )

invert( [ <number> | <percentage> ]? )

opacity( [ <number> | <percentage> ]? )

sepia( [ <number> | <percentage> ]? )

saturate( [ <number> | <percentage> ]? )