CSS backdrop-filter 속성의 역할은?

Q: CSS backdrop-filter 속성의 역할은?

요소의 배경 뒤에 있는 콘텐츠에 흐림(blur), 밝기 등 필터 효과를 적용한다 backdrop-filter: blur(10px)을 반투명 배경을 가진 요소에 적용하면, 요소 뒤에 보이는 콘텐츠에 흐림 효과가 적용됩니다. iOS 스타일의 글라스모피즘(유리 효과) UI를 만들 때 주로 사용됩니다. filter는 요소 자체에, backdrop-filter는 뒤 배경에 적용되는 점이 다릅니다.

보통 MDN Web Docs

보기 및 정답

A 요소의 배경 뒤에 있는 콘텐츠에 흐림(blur), 밝기 등 필터 효과를 적용한다

B opacity 속성은 자식 요소에 영향을 주지 않고 해당 요소만 투명하게 한다

C background-blend-mode는 배경 이미지에만 적용되고 색상은 제외된다

D mix-blend-mode는 형제 요소 간에는 적용할 수 없고 부모자식만 가능하다

해설

backdrop-filter: blur(10px)을 반투명 배경을 가진 요소에 적용하면, 요소 뒤에 보이는 콘텐츠에 흐림 효과가 적용됩니다. iOS 스타일의 글라스모피즘(유리 효과) UI를 만들 때 주로 사용됩니다. filter는 요소 자체에, backdrop-filter는 뒤 배경에 적용되는 점이 다릅니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

CSS backdrop-filter 속성의 역할은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩