CSS backdrop-filter 속성

정의 및 사용법

backdrop-filter 속성은 요소 뒤의 영역에 그래픽 효과를 적용하는 데 사용됩니다.

ヒント:효과를 볼 수 있도록 요소나 배경은 최소한 일부분이 투명해야 합니다.

예제

요소 뒤의 영역에 그래픽 효과를 추가합니다:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

개인적으로 시도해 보세요

CSS 문법

backdrop-filter: none|filter|initial|inherit;

속성 값

값 설명
none 기본 값. 배경에 필터를 적용하지 않습니다.
filter

스파이스로 구분된 필터 함수 목록, 예를 들어:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

또는 SVG 필터 URL을 지정합니다.

initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 이 속성을 부모 요소에서 상속합니다. 참조: inherit.

기술 세부 사항

기본 값: none
상속성: 아니요
애니메이션 제작: 지원. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.backdropFilter="grayscale(100%)"

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 최초의 브라우저 버전을 나타냅니다.

데이터 -webkit- 접두사를 사용하는 숫자는 이 접두사를 최초로 지원한 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
76 79 103 9 -webkit- 63

관련 페이지

교육 자료:CSS 이미지

참조:CSS 필터 속성

참조:HTML DOM 필터 속성