CSS 백그라운드 블러 효과는 filter
와 backdrop-filter
로 사용가능하다.
filter
는 하위요소 전체에 블러 처리를 할 수 있다.
body {
filter: blur(5px);
}
backdrop-filter
는 특정 요소에 블러 처리를 할 수 있으며 가상요소 before
혹은 after
생성 후 사용가능하다.
body::before {
content: "";
position: absolute;;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
}
filter
사용시 하위요소까지 효과가 적용되어 헤맸던 적이 있는데filter
를 사용하니 하얀색 테두리가 생겨서 backdrop-filter
를 사용하니 해결되었다.backdrop-filter
를 처음 사용할 때 사용법을 몰라 오파시티도 줘보고 z-index
를 바꿔보기도하고
background-blend-mode
도 만져봤지만 적용이 안됐다.
문제는 간단했다. 가상요소 생성 후 backdrop-filter
를 사용해주어 해결했다.