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 | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ○ | ○ | ○ |