Bagaimana untuk Mencipta Kesan Skala Kelabu Silang Pelayar untuk Imej Latar Belakang CSS?

Skala Kelabu Penyemak Imbas Merentas untuk Imej Latar Belakang CSS

Imej latar belakang boleh menambah kedalaman dan minat visual pada halaman web, tetapi kadangkala ia wajar untuk dipersembahkan mereka dalam format nyah tepu atau skala kelabu. Walaupun penapis CSS3: grayscale() boleh mencapai kesan ini dalam pelayar moden seperti Chrome dan Safari, ia tidak mempunyai sokongan dalam versi terdahulu. Untuk mengatasi had ini, penyelesaian merentas penyemak imbas diperlukan.

Filter Fallback:

Satu pendekatan ialah menggunakan penapis: url() property dengan SVG sebaris penapis yang mentakrifkan penukaran skala kelabu. Teknik ini berfungsi pada kebanyakan penyemak imbas, termasuk Firefox, IE dan 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>

Penapis SVG yang disediakan mentakrifkan matriks warna yang menukarkan setiap saluran warna kepada 33.33% daripada nilai asalnya, dengan berkesan menghasilkan kesan skala kelabu .

Togol jQuery:

Jika penukaran skala kelabu dinamik diingini, jQuery boleh dimanfaatkan untuk menggunakan dan mengalih keluar penapis skala kelabu pada acara alih tetikus dan keluar tetikus:

$(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); }); });<p></p>Kaedah ini menukar imej kepada skala kelabu dengan menetapkan nilai tepu matriks warna kepada 0.<p></p>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Skala Kelabu Silang Pelayar untuk Imej Latar Belakang CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!