CSS에서 회색조 배경 이미지에 대한 브라우저 간 호환성을 어떻게 달성할 수 있습니까?

CSS의 회색조 배경 이미지

문제:

페이딩에 대한 크로스 브라우저 지원 달성 CSS 배경 이미지를 그레이스케일로 변환하는 것은 여전히 ​​어려운 일입니다. CSS3 필터 회색조 효과는 Chrome 및 Safari와 같은 최신 브라우저에서는 효과적으로 작동하지만 Firefox, IE 및 모바일 브라우저와 같은 이전 브라우저에서는 작동하지 않습니다.

해결책:

SVG 필터 사용:

이 솔루션에는 색상 변환 적용에 대한 브라우저 간 접근 방식을 제공하는 SVG 필터 사용이 포함됩니다. 이 기술에는 다음 SVG 필터를 사용하여 데이터 URL을 생성하는 작업이 포함됩니다.

<code class="svg"><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">/</feColorMatrix>
</filter>
</svg></code>

필터 속성을 사용하여 이 필터를 배경 이미지에 적용하면 회색조 효과를 얻을 수 있습니다.

<code class="css">.grayscale {
  -webkit-filter: grayscale(100%);
  filter: gray;
  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>

동적 전환을 위해 jQuery 사용:

회색조 효과의 동적 전환을 위해 jQuery를 사용할 수 있습니다:

<code class="jquery">$(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>

IE10-11 호환성:

IE10-11의 경우 브라우저 렌더링 변경으로 인해 또 다른 접근 방식이 필요합니다. 채도 감소를 위해 다음 SVG 필터를 사용하여 유사한 회색조 효과를 얻을 수 있습니다.

<code class="svg"><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>

위 내용은 CSS에서 회색조 배경 이미지에 대한 브라우저 간 호환성을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!