CSS 크로스 브라우저 호환성으로 회색조 배경 이미지를 얻는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 크로스 브라우저 호환성으로 회색조 배경 이미지를 얻는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-28 17:19:29

원래의

793명이 탐색했습니다.

How to Achieve Grayscale Background Images with CSS Cross-Browser Compatibility?

CSS 크로스 브라우저 호환성으로 회색조 배경 이미지를 얻는 방법

CSS를 사용하여 회색조 배경 이미지를 만드는 것은 브라우저 불일치로 인해 어려울 수 있습니다. . 다음은 다양한 브라우저에서 작동하는 포괄적인 솔루션입니다.

방법 1: CSS3 필터

CSS3 필터 속성, 특히 greyscale()을 사용하면 회색조 효과를 적용할 수 있습니다. 배경 이미지로. 그러나 이 기술은 Chrome 및 Safari와 같은 최신 브라우저에서만 지원됩니다.

예:

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}</code>

로그인 후 복사

방법 2: SVG 필터

브라우저 간 호환성을 위해 SVG 필터를 활용하여 회색조 효과를 얻을 수 있습니다. 이 방법을 사용하려면 SVG 문서에서 필터를 정의하고 CSS에서 이를 참조해야 합니다.

예:

SVG 필터:

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

로그인 후 복사

CSS:

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  filter: url(#grayscale);
}</code>

로그인 후 복사

방법 3: jQuery 토글

회색조와 비농도 사이를 전환하려는 경우 -grayscale을 동적으로 사용하면 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>

로그인 후 복사

HTML :

<code class="HTML"><div id="image" class="nongrayscale">
  Rollover this image to toggle grayscale
</div></code>

로그인 후 복사

CSS:

<code class="CSS">.grayscale {
  background: url(yourimagehere.jpg);
  -moz-filter: url("data:image/svg+xml;utf8,...");
  -o-filter: url("data:image/svg+xml;utf8,...");
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,...");
}

.nongrayscale {
  background: url(yourimagehere.jpg);
}</code>

로그인 후 복사

IE10-11 호환성:

IE10 및 IE11의 대체 접근 방식은 feColorMatrix 요소와 함께 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="yourimage.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

로그인 후 복사

위 내용은 CSS 크로스 브라우저 호환성으로 회색조 배경 이미지를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!