如何實現CSS跨瀏覽器相容的灰階背景圖片？

如何使用CSS 實現灰階背景影像跨瀏覽器相容性

由於瀏覽器不一致，使用CSS 建立灰階背景影像可能是一個挑戰。這是一個適用於各種瀏覽器的全面解決方案：

方法1：CSS3 過濾器

CSS3 過濾器屬性，特別是grayscale()，允許您套用灰階效果到背景影像。但是，此技術僅受 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>

CSS:

方法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中文網其他相關文章！