CSS 배경 이미지에 대한 크로스 브라우저 그레이스케일 효과를 만드는 방법은 무엇입니까?

CSS 배경 이미지용 크로스 브라우저 그레이스케일

배경 이미지는 웹페이지에 깊이와 시각적 흥미를 더할 수 있지만 때로는 표시하는 것이 바람직할 때도 있습니다. 채도가 낮거나 회색조 형식으로 표시됩니다. CSS3의 filter: greyscale() 속성은 Chrome 및 Safari와 같은 최신 브라우저에서 이 효과를 얻을 수 있지만 이전 버전에서는 지원이 부족합니다. 이러한 제한을 극복하려면 크로스 브라우저 솔루션이 필요합니다.

Filter Fallback:

한 가지 접근 방식은 인라인 SVG와 함께 filter: url() 속성을 활용하는 것입니다. 그레이스케일 변환을 정의하는 필터입니다. 이 기술은 Firefox, IE 및 Edge를 포함한 대부분의 브라우저에서 작동합니다.

<code class="css">.grayscale {
  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");
}</code>

제공된 SVG 필터는 각 색상 채널을 원래 값의 33.33%로 변환하여 회색조 효과를 효과적으로 생성하는 색상 매트릭스를 정의합니다. .

jQuery 토글:

동적 그레이스케일 전환이 필요한 경우 jQuery를 활용하여 마우스오버 및 마우스아웃 이벤트에서 그레이스케일 필터를 적용하고 제거할 수 있습니다.

<code class="javascript">$(document).ready(function () {
  $("#image").mouseover(function () {
    $(".nongrayscale").removeClass().fadeTo(400, 0.8).addClass("grayscale").fadeTo(400, 1);
  });
  $("#image").mouseout(function () {
    $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
  });
});</code>

이 스크립트는 부드러운 페이드 인 및 페이드 아웃 애니메이션으로 이미지의 회색조 효과를 전환합니다.

SVG 채도 저하:

최근 IE 버전(10-11)에서는 SVG 구현 변경으로 인해 위 솔루션이 작동하지 않을 수 있습니다. 이러한 브라우저의 경우 대체 SVG 기반 접근 방식을 사용하여 이미지의 채도를 낮출 수 있습니다.

<code class="html"><svg>
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image xlink:href="your_image.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

이 방법은 색상 매트릭스의 채도 값을 0으로 설정하여 이미지를 회색조로 변환합니다.

위 내용은 CSS 배경 이미지에 대한 크로스 브라우저 그레이스케일 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!