CSS

[CSS] 이미지 모자이크( blur ) 하는 방법

eulBlue 2023. 8. 21. 15:53

😢 내가 겪은 문제

이미지를 모자이크 처리하는 경우가 생각보다 많았다.

미리보기를 생성하거나, 로딩바를 생성했을 경우 또는 데이터 시각화를 통해 집중시키는 효과를 보고 싶을 때 사용하였다.

bulr 라는 단어는 생각이 나는데 잘 기억이 안나는 경우가 많아서 다른 사람들도 그렇지 않을까 싶어서 기록해둔다.

실제로 나는 잘 기억이 안나서 자꾸 검색해보게 되더라 ^^

filter: blur(5px);
-webkit-filter: blur(5px);

5px 만큼 모자이크 처리를 하는건데, 생각보다 5px 만큼만 해도 적당하니, 잘 조절해서 사용하면 될 것같다.

-webkit-filter 같은 경우에는 WebKit 기반 브라우저(예: 사파리)에 대응하기 위해 같이 사용해주는게 좋다.