1.백그라운드 블러효과 주기

CSS 백그라운드 블러 효과는 filter와 backdrop-filter로 사용가능하다.

1.filter

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

body { 
 filter: blur(5px);
}

2.backdrop-filter

backdrop-filter는 특정 요소에 블러 처리를 할 수 있으며 가상요소 before 혹은 after 생성 후 사용가능하다.

body::before {
 content: "";
 position: absolute;;
 width: 100%;
 height: 100%;
 backdrop-filter: blur(10px);
}

2.가끔하는 실수 및 문제점

1.filter

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

2.backdrop-filter

backdrop-filter를 처음 사용할 때 사용법을 몰라 오파시티도 줘보고 z-index를 바꿔보기도하고
background-blend-mode도 만져봤지만 적용이 안됐다.
문제는 간단했다. 가상요소 생성 후 backdrop-filter를 사용해주어 해결했다.