웹솔루션개발 25년 노하우! 해피CGI의 모든것

css 속성인 filter를 이용해서 이미지를 블러처리하는 방법입니다. HTML 구조          Live CSS Blur    Go ahead, resize me.   CSS 소스body {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=")    no-repeat center center fixed;  background-size: cover;} .blur {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4..

backdrop-filter: blur(20px); backdrop-filter 로 다양한 효과를 해당 요소의 배경에 적용할 수 있습니다. blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() 같은 효과를 적용할 수 있습니다.

원하는 영역의 뒤에 있는 이미지나 컨텐츠를 블러처리 합니다. 예제처럼 사용도 가능하고 상단에 픽스되는 헤더 영역에 응용하는 방법도 가능합니다. clip-path 와 fliter를 사용하여 구현이 가능합니다. clip-path 로 다양한 모양을 만들수 있기에 활용이 편리합니다. 해당 사이트 혹은 첨부파일을 다운로드 받아 소스를 직접 확인할 수 있습니다.