[CSS] filter: blur() 와 backdrop-filter:blur()

css를 만지다가 배경을 블러처리 해야 하는 일이 생겨서 filter 와 backdrop-filter를 써보게 되었다.

 

 

내가 만들 것과 팀원분이 만든 것의 디자인이 비슷하기 때문에 코드를 복사한 후 div박스에 backgroundImage를 주고 전체를 감쌌다. backgroundImage를 인라인 스타일로 준 이유는 나중에 props를 뚫기 쉽게 하기 위해서다. (추후 이미지가 계속 변경되어야 함)

 

처음엔 백그라운드 이미지에 바로 filter: blur() 처리를 했고 결과는 이랬다.

 

 

안에 있는 모든 요소가 블러처리 된다. 

 

찾아보니 많이 사용되는 요소 중에 backdrop-filter라는게 있었다.

블러처리할 요소 바로 안쪽 태그에 backdrop-fliter를 주면 배경만 블러 처리 할 수 있다. 백그라운드 이미지 div의 바로 안쪽 div 크기가 390*180이라 그만큼의 크기만큼 블러처리 되는 것이다. 

특징이 있다면 테두리는 블러 처리 되지 않는다.

 

 

사실 그게 이 글을 쓰게 된 이유인데 내가 만들어야 하는 디자인은 테두리도 블러를 줘야 한다.

다양하고 복잡한 css 기술이 있는 듯 하지만 나는 고민 끝에 백그라운드 이미지 div로 전체를 감싸지 않고 분리해서 둔 후 z-index와 position값을 이용해 위치를 조정했다.

 

 

내가 원했던 대로 배경이 테두리까지 흐리고 안쪽 컨텐츠는 선명한 디자인이 완성되었다.