Bagaimana untuk Mencipta Imej Skala Kelabu yang Mewarna Semula pada Mouseover Menggunakan CSS?

Penskalaan Kelabu CSS dengan Pewarnaan Semula Tetikus

Pertanyaan:

Buat imej yang pada mulanya berskala kelabu, tetapi beralih kepada warna apabila tetikus melayang di atasnya. Laksanakan ini menggunakan teknik CSS yang serasi dengan IE dan Firefox.

Penyelesaian:

CSS Tulen (Menggunakan Imej Berwarna Tunggal):

Kaedah ini menggunakan penapis CSS untuk mencapai kesan skala kelabu dan mengalih keluar penapis pada tuding untuk mendedahkan warna asal:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/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></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; Safari 6+ */
}

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

SVG Sebaris dengan Peralihan CSS:

Pendekatan ini membenamkan elemen SVG dengan imej dan menggunakan CSS peralihan kepada pudar antara skala kelabu dan warna pada tuding:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/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></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease;
  -webkit-backface-visibility: hidden;
}

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

svg {
  background: url(https://image-source.jpg);
}

svg image {
  transition: all .6s ease;
}

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Imej Skala Kelabu yang Mewarna Semula pada Mouseover Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!