[CSS] filter VS backdrop-filter 블러 효과 [9/10 study]

 

 

filter VS backdrop-filter 블러 효과

 

 

 

 

1. filter

 

https://developer.mozilla.org/ko/docs/Web/CSS/filter

filter - CSS: Cascading Style Sheets | MDN

 

filter는 하위요소 전체에 블러 처리를 할 수 있습니다.

 

EX_)

 

 

주의!

filter

- filter 사용시 하위요소까지 효과가 적용되어 헤맸던 적이 있는데 별개의 형제요소를 새로 만들어 백그라운드를 주고 효과를 적용해서 해결했었다.

- filter를 사용하니 하얀색 테두리가 생겨서 backdrop-filter를 사용하니 해결되었다.

 

2. backdrop-filter

 

backdrop-filter는 특정 요소에 블러 처리를 할 수 있습니다.

 

EX_)