CSS를 사용하여 회색조 배경 이미지를 만드는 방법

활기차고 역동적인 웹 디자인 시대에는 때로는 미묘한 단순함을 통합하는 것이 필요합니다. 이를 달성하는 한 가지 방법은 배경 이미지를 그레이스케일로 변환하여 웹 사이트에 클래식하거나 빈티지한 미학을 부여하는 것입니다.

크로스 브라우저 CSS3 필터

배경을 그레이스케일로 만드는 가장 간단한 접근 방식 이미지는 CSS3 필터 greyscale:

-webkit-filter: grayscale(100%);

그러나 이 기술은 Chrome v.15 및 Safari v.6에서만 작동합니다. 브라우저 호환성 제한.

크로스 브라우저 SVG 필터

크로스 브라우저 그레이스케일 효과를 얻으려면 SVG 필터를 활용할 수 있습니다:

filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

이 솔루션은 Firefox, Chrome, Edge를 포함한 대부분의 주요 브라우저에서 작동합니다.

jQuery 애니메이션

JavaScript를 사용하여 회색조 효과를 동적으로 전환하려면 jQuery를 사용할 수 있습니다.

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

이 코드는 회색조 클래스를 추가하고 위에 마우스를 올리면 이미지가 희미해집니다.

IE10-11 호환성

Internet Explorer 10-11에서 위의 SVG 필터 기술이 작동하지 않습니다. 대신, 불포화 필터를 사용할 수 있습니다:

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

이 필터는 필터 속성을 사용하여 이미지에 적용할 수 있습니다.

이러한 방법을 활용하면 CSS에서 배경 이미지를 쉽게 회색조로 조정하여 웹에 시대를 초월한 느낌을 더할 수 있습니다. 브라우저 간 호환성을 유지하면서 디자인합니다.