Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencapai Skala Kelabu dengan Pemulihan Warna pada Mouse-Over Menggunakan CSS?

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

Patricia Arquette
Lepaskan: 2024-10-26 08:39:02
asal
274 orang telah melayarinya

How to Achieve Grayscale with Color Restoration on Mouse-Over Using 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>
Salin selepas log masuk

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>
Salin selepas log masuk
<code class="html"><img class="grayscale" src="grayscale_image.jpg">
<img class="colored" src="colored_image.jpg"></code>
Salin selepas log masuk

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>
Salin selepas log masuk
<code class="xml"><svg ...>
  <defs>
    <filter id="filtersPicture">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" ... />
</svg></code>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan