backdrop-filter

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

정의(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)

호환성(Compatibility)

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