Bagaimana untuk mencapai transformasi imej skala kelabu pada hover tetikus dengan CSS, memastikan keserasian dengan IE dan Firefox?

Skala Kelabu dan Warnakan Semula Imej pada Tuding Tetikus dengan CSS

Cabaran: Ubah ikon berwarna kepada skala kelabu dan kembalikan ia berwarna apabila tetikus melayang di atasnya, memastikan keserasian dengan kedua-dua IE dan Firefox.

Penyelesaian:

1. CSS Tulen (Menggunakan Imej Satu Warna):

Pendekatan ini menggunakan penapis CSS untuk menukar imej kepada skala kelabu. Sifat penapis digunakan pada elemen img dengan skala kelabu kelas.

CSS:

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

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

2. CSS dan SVG (dengan SVG Sebaris):

IE10 menyokong SVG sebaris, membolehkan penyelesaian yang lebih bersih. Imej SVG ditapis menggunakan elemen feColorMatrix dan kesan skala kelabu digunakan dengan menetapkan nilai tepu kepada 0.

HTML:

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 377" width="400" height="377">
  <defs>
    <filter id="filtersPicture">
      <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
      <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" x="0" y="0" width="400" height="377" xlink:href="image.jpg" />
</svg></code>

Atas ialah kandungan terperinci Bagaimana untuk mencapai transformasi imej skala kelabu pada hover tetikus dengan CSS, memastikan keserasian dengan IE dan Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!