본문 바로가기

Webstoryboy

Category

Explanation

CSS/Alphabet

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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
backdrop-filter

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기