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

CSS 배경 이미지를 회색조로 페이딩하기 위한 크로스 브라우저 솔루션

CSS3 필터를 사용할 수 있음에도 불구하고 배경 이미지에 회색조 효과를 적용하는 것은 여전히 ​​남아 있습니다. 다양한 브라우저에 걸친 도전입니다. SVG 필터를 사용하는 솔루션은 Safari 및 Chrome에서는 작동하지만 다른 브라우저에서는 작동하지 않습니다.

이 제한을 극복하기 위한 대체 접근 방식은 인라인 SVG 코드를 사용하여 사용자 정의 필터를 생성하는 것입니다. 이 방법은 IE10 및 11을 포함한 모든 최신 브라우저와 호환됩니다.

IE10-11용 코드 샘플:

<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="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

그레이스케일 효과 전환을 위한 jQuery 솔루션 :

그레이스케일 효과를 동적으로 전환하려면 jQuery를 사용할 수 있습니다.

<code class="html"><div id="image" class="nongrayscale">
  rollover this image to toggle grayscale
</div></code>

<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>

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