Bagaimana untuk Mencapai Kesan Skala Kelabu Merentas Pelayar pada Imej Latar Belakang CSS?

Penyelesaian Silang Penyemak Imbas untuk Memudarkan Imej Latar Belakang CSS kepada Skala Kelabu

Walaupun penapis CSS3 tersedia, penggunaan kesan skala kelabu pada imej latar belakang kekal cabaran merentasi pelayar yang berbeza. Penyelesaian menggunakan penapis SVG berfungsi untuk Safari dan Chrome, tetapi tidak untuk penyemak imbas lain.

Untuk mengatasi pengehadan ini, pendekatan alternatif ialah menggunakan kod SVG sebaris untuk mencipta penapis tersuai. Kaedah ini serasi dengan semua pelayar moden termasuk IE10 dan 11.

Sampel Kod untuk IE10-11:

<code class="html"><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>

Penyelesaian jQuery untuk Menogol Kesan Skala Kelabu :

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

<code class="html"><div id="image" class="nongrayscale">
  rollover this image to toggle grayscale
</div></code>

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

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