Bagaimana untuk Mencapai Imej Latar Belakang Skala Kelabu dengan Keserasian Cross-Pelayar CSS?

Cara Mencapai Imej Latar Belakang Skala Kelabu dengan Keserasian Pelayar Silang CSS

Mencipta imej latar belakang skala kelabu menggunakan CSS boleh menjadi satu cabaran kerana ketidakkonsistenan penyemak imbas . Berikut ialah penyelesaian komprehensif yang berfungsi merentas pelbagai penyemak imbas:

Kaedah 1: Penapis CSS3

Sifat penapis CSS3, khususnya skala kelabu(), membolehkan anda menggunakan kesan skala kelabu kepada imej latar belakang. Walau bagaimanapun, teknik ini hanya disokong oleh penyemak imbas moden seperti Chrome dan Safari.

Contoh:

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}</code>

Kaedah 2: Penapis SVG

Untuk keserasian merentas pelayar, anda boleh menggunakan penapis SVG untuk mencapai kesan skala kelabu. Kaedah ini memerlukan anda mentakrifkan penapis dalam dokumen SVG dan merujuknya dalam CSS anda.

Contoh:

Penapis SVG:

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

CSS:

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  filter: url(#grayscale);
}</code>

Kaedah 3: jQuery Togol

Jika anda mahu togol antara skala kelabu dan bukan -skala kelabu secara dinamik, anda boleh menggunakan jQuery.

Contoh:

jQuery:

<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>

HTML :

<code class="HTML"><div id="image" class="nongrayscale">
  Rollover this image to toggle grayscale
</div></code>

CSS:

<code class="CSS">.grayscale {
  background: url(yourimagehere.jpg);
  -moz-filter: url("data:image/svg+xml;utf8,...");
  -o-filter: url("data:image/svg+xml;utf8,...");
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,...");
}

.nongrayscale {
  background: url(yourimagehere.jpg);
}</code>

Keserasian IE10-11:

Untuk IE10 dan IE11, pendekatan alternatif ialah menggunakan penapis SVG dengan elemen feColorMatrix.

Contoh:

<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="yourimage.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

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