backdrop-filter

backdrop-filter

backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.

---

backdrop-filter

backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.

특징	설명
기본 값	backdrop-filter : none
적용	animation
버전	CSS3
사용성	★★★☆☆

정의(Definition)

• backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.
• 요소의 배경을 반투명 설정하여야 효과를 확인할 수 있습니다.

그래픽 효과와 관련된 속성(Graphic Related Properties)

• filter 속성은 그래픽 효과를 설정합니다.
• backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때 그래픽 효과를 설정합니다.
• mix-blend-mode 속성은 요소를 혼합했을 때 그래픽 효과를 설정합니다.

문법(Syntax)

backdrop-filter : none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate()

/* 기본 속성 */
backdrop-filter : none;
backdrop-filter : blur(10px)
backdrop-filter : brightness(50%);
backdrop-filter : contrast(40%);
backdrop-filter : drop-shadow(4px 4px 4px black);
backdrop-filter : grayscale(75%);
backdrop-filter : hue-rotate(30deg);
backdrop-filter : invert(50%);
backdrop-filter : opacity(30%);
backdrop-filter : sepia(60%);
backdrop-filter : saturate(100%);

속성(Property)

속성값	설명
none	이미지의 아무런 효과를 주지 않습니다.
blur(px)	이미지의 블러 효과를 설정합니다.
brightness(%)	이미지의 밝고 어두움 정도를 설정합니다.
contrast(%)	이미지의 대비를 설정합니다.
drop-shadow()	이미지의 그림자를 설정합니다.
grayscale(%)	이미지의 그레이스케일를 설정합니다.
hue-rotate(deg)	이미지의 색조를 설정합니다.
invert(%)	이미지를 반전합니다.
opacity(%)	이미지의 투명도를 설정합니다.
saturate(%)	이미지의 채도를 설정합니다.
sepia(%)	이미지의 세피아 효과를 설정합니다.
url()	이미지의 경로를 설정합니다.
inherit	상위 요소의 속성 값을 상속받습니다.

예제1(Sample)

이미지의 blur 효과를 설정하는 예제입니다.

blur(0px)

blur(2px)

blur(5px)

blur(10px)

blur(15px)

HTML

CSS

SCRIPT

<div class="box filter-box">
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="샘플이미지"><strong>blur(0px)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="샘플이미지"><strong>blur(2px)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="샘플이미지"><strong>blur(5px)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="샘플이미지"><strong>blur(10px)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="샘플이미지"><strong>blur(15px)</strong></div>
</div>

.filter-box > div:nth-child(1) strong {backdrop-filter: blur(0px);}
.filter-box > div:nth-child(2) strong {backdrop-filter: blur(2px);}
.filter-box > div:nth-child(3) strong {backdrop-filter: blur(5px);}
.filter-box > div:nth-child(4) strong {backdrop-filter: blur(10px);}
.filter-box > div:nth-child(5) strong {backdrop-filter: blur(15px);}

//javascript none

예제2(Sample)

이미지의 brightness 효과를 설정하는 예제입니다.

brightness(0%)

brightness(25%)

brightness(50%)

brightness(75%)

brightness(100%)

HTML

CSS

SCRIPT

<div class="box filter-box">
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>brightness(0%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>brightness(25%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>brightness(50%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>brightness(75%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>brightness(100%)</strong></div>
</div>

.brightness > div:nth-child(1) strong {backdrop-filter: brightness(0%);}
.brightness > div:nth-child(2) strong {backdrop-filter: brightness(25%);}
.brightness > div:nth-child(3) strong {backdrop-filter: brightness(50%);}
.brightness > div:nth-child(4) strong {backdrop-filter: brightness(75%);}
.brightness > div:nth-child(5) strong {backdrop-filter: brightness(100%);}

//javascript none

예제3(Sample)

이미지의 contrast 효과를 설정하는 예제입니다.

contrast(0%)

contrast(25%)

contrast(50%)

contrast(75%)

contrast(100%)

HTML

CSS

SCRIPT

<div class="box filter-box">
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>contrast(0%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>contrast(25%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>contrast(50%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>contrast(75%)</strong></div>
    <div><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지"><strong>contrast(100%)</strong></div>
</div>

.brightness > div:nth-child(1) strong {backdrop-filter: contrast(0%);}
.brightness > div:nth-child(2) strong {backdrop-filter: contrast(25%);}
.brightness > div:nth-child(3) strong {backdrop-filter: contrast(50%);}
.brightness > div:nth-child(4) strong {backdrop-filter: contrast(75%);}
.brightness > div:nth-child(5) strong {backdrop-filter: contrast(100%);}

//javascript none

호환성(Compatibility)

						6	7	8	9	10	11
backdrop-filter	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○

참고 사이트(Reference)

• MDN

---