CSS のクロスブラウザー互換性を備えたグレースケールの背景画像を実現するにはどうすればよいですか?

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 Toggle

グレースケールと非グレースケールを切り替えたい場合-グレースケールを動的に使用すると、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 中国語 Web サイトの他の関連記事を参照してください。