Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS filter 속성으로 이미지 필터 효과 만들기 (흐림 · 밝기 · 대비)

CSS의 filter 속성을 사용하면 포토샵 같은 이미지 편집 도구 없이도 웹 페이지의 이미지에 흐림(blur), 밝기(brightness), 대비(contrast) 등 다양한 시각 효과를 손쉽게 적용할 수 있습니다. 아래 예제 코드를 실행하면 네 개의 동일한 이미지가 원본, 대비 강조, 밝기 증가, 흐림 처리된 상태로 나란히 표시됩니다.

자주 사용되는 CSS 필터 함수

  • blur(px) : 이미지에 가우시안 블러(흐림) 효과를 적용합니다. 값이 클수록 더 많이 흐려집니다.
  • brightness(%) : 이미지의 밝기를 조절합니다. 100%가 원본이며, 100%보다 크면 밝아지고 작으면 어두워집니다.
  • contrast(%) : 이미지의 명암 대비를 조절합니다. 100%가 원본이며, 값을 높이면 더 선명하고 극적인 느낌을 줍니다.

이 외에도 grayscale(), sepia(), saturate(), hue-rotate(), invert(), drop-shadow() 등의 함수를 단독으로 또는 조합하여 사용하면 훨씬 다채로운 연출이 가능합니다.

예제 코드

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        height: auto;
        float: left;
        margin-right: 10px;
      }
      .contrast {
        -webkit-filter: contrast(180%);
        filter: contrast(180%);
      }
      .brightness {
        -webkit-filter: brightness(250%);
        filter: brightness(250%);
      }
      .blur {
        -webkit-filter: blur(4px);
        filter: blur(4px);
      }
    </style>
  </head>
  <body>
    <img src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png"
         alt="Animation Training" width="200" height="200">

    <img class="contrast"
         src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png"
         alt="Animation Training" width="200" height="200">

    <img class="brightness"
         src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png"
         alt="Animation Training" width="200" height="200">

    <img class="blur"
         src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png"
         alt="Animation Training" width="200" height="200">
  </body>
</html>

코드 설명

각 <img> 요소에 클래스를 지정하고, 클래스별로 서로 다른 filter 값을 적용했습니다. 첫 번째 이미지에는 필터가 없어 원본 그대로 출력되며, 두 번째부터 순서대로 contrast(180%)(대비 강조), brightness(250%)(밝기 증가), blur(4px)(흐림 효과)가 적용됩니다. 이미지가 나란히 배치되도록 float: left와 margin-right로 간격을 조정했습니다.

브라우저 호환성 참고 사항

-webkit-filter는 구버전 Safari 등 웹킷 기반 브라우저를 위한 접두사입니다. 최신 브라우저에서는 표준 filter 속성만으로도 정상적으로 동작하지만, 구형 브라우저까지 고려한다면 두 속성을 함께 작성하는 것이 안전합니다.