Colin's Blog
[css] 블러 필터

CSS 블러 필터를 사용하여 웹 페이지에서 이미지를 지속적으로 처리할 수 있습니다. 블러 필터를 사용하면 이미지에 블러 효과를 만들 수 있으며, 주로 배경이나 플로팅 이미지에 적용됩니다.

사용법

.blur {
  filter: blur(5px);
}

위 코드에서 .blur 클래스에 filter: blur(5px);를 적용하여 5px의 블러 효과를 적용했습니다. 픽셀 값은 필요에 따라 조절할 수 있습니다.

지원

블러 필터는 대부분의 최신 웹 브라우저에서 지원됩니다. 그러나 일부 구식 웹 브라우저에서는 블러 효과가 제대로 표시되지 않을 수 있으므로 주의가 필요합니다.

예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .blur {
      filter: blur(5px);
    }
  </style>
</head>
<body>
  <img src="example.jpg" alt="예시 이미지" class="blur">
</body>
</html>

위 코드는 .blur 클래스를 사용하여 이미지에 5px의 블러 효과를 적용한 예시입니다.

결론

CSS 블러 필터를 사용하면 웹 페이지에서 이미지에 쉽게 블러 효과를 추가할 수 있습니다. 그러나 모든 웹 브라우저에서 지원되는 것은 아니므로, 대상 사용자층을 고려하여 사용할 필요가 있습니다.

참고 자료

© 2018 Colin. All rights reserved.