Bagaimana untuk Mencapai Skala Kelabu dengan Pemulihan Warna pada Mouse-Over Menggunakan CSS?

Penskalaan kelabu dengan Pemulihan Warna pada Tetikus menggunakan CSS

Mencapai penampilan skala kelabu dengan pemulihan warna pada tetikus boleh dilakukan melalui pelbagai kaedah , menyediakan keserasian merentas pelayar dalam kedua-dua IE dan Firefox.

Kaedah 1: CSS Tulen (Menggunakan Imej Berwarna Tunggal)

Teknik ini menggunakan sifat penapis dengan vendor awalan untuk menskala kelabu imej dalam semua penyemak imbas yang disokong:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8, ..."); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

Kaedah 2: CSS Tulen (Menggunakan Dua Imej)

Pendekatan lain melibatkan penggunaan dua imej: skala kelabu versi dan versi berwarna. Imej skala kelabu pada mulanya dipaparkan dan keadaan tuding beralih kepada imej berwarna:

<code class="css">img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}</code>

<code class="html"><img class="grayscale" src="grayscale_image.jpg">
<img class="colored" src="colored_image.jpg"></code>

Kaedah 3: SVG dengan Penapis CSS

Untuk IE10 dan penyemak imbas moden, SVG sebaris boleh digunakan untuk menggunakan penapis, membenarkan kesan skala kelabu dikawal secara dinamik:

<code class="css">svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}</code>

<code class="xml"><svg ...>
  <defs>
    <filter id="filtersPicture">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" ... />
</svg></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Skala Kelabu dengan Pemulihan Warna pada Mouse-Over Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!