如何使用 CSS 創建灰階背景圖像

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

跨瀏覽器CSS3 過濾器

對背景進行灰度化的最直接方法圖像是應用CSS3過濾器grayscale:

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

jQuery 動畫

如果你想要使用JavaScript 動態切換灰階效果，可以使用jQuery:

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

$(".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 中對背景圖像進行灰度化，為您的網頁添加永恆的觸感設計同時保持跨瀏覽器兼容性。