Bagaimana untuk Mencapai Imej Latar Belakang Skala Kelabu dengan Keserasian Cross-Pelayar CSS?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-10-28 17:19:29

asal

793 orang telah melayarinya

How to Achieve Grayscale Background Images with CSS Cross-Browser Compatibility?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

CSS:

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

Salin selepas log masuk

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>

Salin selepas log masuk

HTML :

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!