[CSS] 사파리 backdrop-filter 적용 에러

Backdrop-filter는 CSS 속성입니다. 

이 속성은 웹 페이지의 요소(예: 배경 이미지 또는 다른 요소) 위에 배치된 요소의 배경에 필터 효과를 적용할 수 있습니다. 이를 통해 요소의 배경에 흐림, 농도 조절, 색상 반전 등 다양한 효과를 추가할 수 있어 시각적으로 매력적인 디자인을 만들 수 있습니다. 

 

적용 전

 

적용 후

.element {
  backdrop-filter: blur(5px);
}

 

필터가 제대로 적용되는 모습을 확인 할 수 있습니다. 

간혼 Safari 버젼에 따라 효과가 적용이 안되는 경우에는 아래와 같이 webkit을 추가하시면 됩니다.

.element {
  -webkit-backdrop-filter: saturate(180%) blur(10px); /* For Safari */
  backdrop-filter: saturate(180%) blur(10px);
 }