如何為CSS背景圖片建立跨瀏覽器灰階效果？

CSS 背景圖像的跨瀏覽器灰度

背景圖像可以增加網頁的深度和視覺興趣，但有時需要呈現它們採用去飽和或灰階格式。雖然CSS3的filter:grayscale()屬性可以在Chrome和Safari等現代瀏覽器中實現這種效果，但它在早期版本中缺乏支援。為了克服這個限制，需要一個跨瀏覽器的解決方案。

過濾器回退：

一種方法是使用過濾器：帶有內聯 SVG 的 url() 屬性定義灰階轉換的過濾器。此技術適用於大多數瀏覽器，包括Firefox、IE 和Edge：

<code class="css">.grayscale {
  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>

提供的SVG 濾鏡定義了一個顏色矩陣，可將每個顏色通道轉換為其原始值的33.33% ，有效地創建灰階效果.

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>

此腳本透過平滑的淡入和淡出動畫切換影像上的灰階效果。

SVG 去飽和：

最近IE (10-11) 版本中，由於 SVG 實現的變化，上述解決方案可能不起作用。對於這些瀏覽器，可以使用另一種基於 SVG 的方法來降低影像的飽和度：

<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="your_image.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

此方法透過將顏色矩陣的飽和度值設為 0 將影像轉換為灰階。

以上是如何為CSS背景圖片建立跨瀏覽器灰階效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！