如何在不同瀏覽器中將背景影像轉換為灰階？-css教學-PHP中文網

如何在不同瀏覽器中將背景影像轉換為灰階？

DDD

發布： 2024-10-27 07:55:03

原創

380 人瀏覽過

How to Convert Background Images to Greyscale Across Different Browsers?

如何使用 CSS 建立灰階背景圖片

在這個充滿活力和動態的網頁設計時代，有時有必要融入一些微妙的簡單性。實現此目的的一種方法是將背景圖像轉換為灰度，這可以為網站帶來經典或復古的美感。

跨瀏覽器CSS3 濾鏡

最直接的灰階背景方法影像是套用CSS3 濾鏡灰階：

-webkit-filter: grayscale(100%);

登入後複製

但是，由於瀏覽器相容性限制，此技術僅適用於Chrome v.15 和Safari v.6。

跨瀏覽器SVG濾鏡

要實現跨瀏覽器的灰階效果，您可以使用SVG 濾鏡：

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");

登入後複製

此解決方案適用於大多數主要瀏覽器，包括Firefox、Chrome 和Edge。

jQuery 動畫

如果您想使用JavaScript 動態切換灰階效果，您可以使用jQuery：

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

登入後複製

此程式碼將會新增一個灰階類，並在滑鼠懸停時淡入圖片.

IE10-11 相容性

在Internet Explorer 10-11 中，上述SVG 過濾技術不起作用。相反，您可以使用去飽和濾鏡：

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

登入後複製

此濾鏡可以使用濾鏡屬性套用於影像。

透過利用這些方法，您可以輕鬆地在 CSS 中對背景圖片進行灰度化，為您的網頁設計增添永恆的魅力，同時保持跨瀏覽器相容性。

以上是如何在不同瀏覽器中將背景影像轉換為灰階？的詳細內容。更多資訊請關注PHP中文網其他相關文章！