Bagaimanakah saya boleh mencapai keserasian silang pelayar untuk imej latar belakang skala kelabu dalam CSS?

Imej Latar Belakang Skala Kelabu dalam CSS

Masalah:

Mencapai sokongan merentas pelayar untuk pudar Imej latar belakang CSS kepada skala kelabu kekal sebagai cabaran. Walaupun kesan skala kelabu penapis CSS3 berfungsi dengan berkesan dalam penyemak imbas moden seperti Chrome dan Safari, ia gagal dalam penyemak imbas lama seperti Firefox, IE dan penyemak imbas mudah alih.

Penyelesaian:

Menggunakan Penapis SVG:

Penyelesaian melibatkan penggunaan penapis SVG, yang menyediakan pendekatan merentas pelayar untuk menerapkan transformasi warna. Teknik ini melibatkan pembuatan URL data dengan penapis SVG berikut:

<code class="svg"><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">/</feColorMatrix>
</filter>
</svg></code>

Dengan menggunakan penapis ini pada imej latar belakang menggunakan sifat penapis, kami boleh mencapai kesan skala kelabu:

<code class="css">.grayscale {
  -webkit-filter: grayscale(100%);
  filter: gray;
  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>

Menggunakan jQuery untuk Togol Dinamik:

Untuk togol dinamik kesan skala kelabu, anda boleh menggunakan jQuery:

<code class="jquery">$(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>

Keserasian IE10-11:

Untuk IE10-11, pendekatan lain diperlukan kerana perubahan dalam pemaparan penyemak imbas. Penapis SVG berikut boleh digunakan untuk penyahtepuan, mencapai kesan skala kelabu yang serupa:

<code class="svg"><svg>
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencapai keserasian silang pelayar untuk imej latar belakang skala kelabu dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!