Bagaimana untuk Menukar Imej Latar Belakang kepada Skala Kelabu Merentasi Pelayar Berbeza?

Cara Mencipta Imej Latar Belakang Skala Kelabu dengan CSS

Dalam era reka bentuk web yang rancak dan dinamik ini, kadangkala perlu menyepadukan sentuhan kesederhanaan yang halus. Satu cara untuk mencapai matlamat ini ialah dengan menukar imej latar belakang kepada skala kelabu, yang boleh memberikan estetika klasik atau vintaj kepada tapak web.

Penapis CSS3 Penyemak Imbas Merentas

Pendekatan paling mudah untuk skala kelabu latar belakang imej adalah untuk menggunakan skala kelabu penapis CSS3:

-webkit-filter: grayscale(100%);

Walau bagaimanapun, teknik ini hanya berfungsi dalam Chrome v.15 dan Safari v.6 disebabkan oleh pengehadan keserasian penyemak imbas.

SVG Penyemak Imbas Merentas Penapis

Untuk mencapai kesan skala kelabu silang penyemak imbas, anda boleh menggunakan penapis 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");

Penyelesaian ini berfungsi dalam kebanyakan penyemak imbas utama, termasuk Firefox, Chrome dan Edge.

Animasi jQuery

Jika anda ingin menogol kesan skala kelabu secara dinamik menggunakan JavaScript, anda boleh menggunakan jQuery:

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

Kod ini akan menambah kelas skala kelabu dan memudarkan imej apabila dituding di atas .

Keserasian IE10-11

Dalam Internet Explorer 10-11, teknik penapis SVG di atas tidak berfungsi. Sebaliknya, anda boleh menggunakan penapis nyahsaturasi:

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

Penapis ini boleh digunakan pada imej menggunakan atribut penapis.

Dengan menggunakan kaedah ini, anda boleh menukar imej latar belakang skala kelabu dengan mudah dalam CSS, menambahkan sentuhan abadi pada reka bentuk web anda sambil mengekalkan keserasian merentas pelayar.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Imej Latar Belakang kepada Skala Kelabu Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!