Bagaimanakah saya boleh mencipta imej skala kelabu dengan CSS yang mewarna semula pada tetikus?

Skala Kelabu Imej dengan CSS & Warna Semula pada Tetikus-Over

Anda boleh mencapai skala kelabu imej dengan CSS dan warna semula pada tetikus- menggunakan beberapa kaedah. Berikut ialah gambaran keseluruhan:

CSS Tulen (Menggunakan Imej Berwarna Tunggal)

Gunakan penapis CSS untuk menukar imej kepada skala kelabu dan mengalih keluar kesan pada tetikus:

<code class="css">img.grayscale {
  filter: grayscale(100%);
}

img.grayscale:hover {
  filter: none;
}</code>

Gabungan CSS dan JavaScript

Buat imej skala kelabu dan imej berwarna, dan togol keterlihatannya pada acara masuk tetikus dan keluar tetikus:

<code class="css">img.grayscale {
  opacity: 1;
}

img.colored {
  opacity: 0;
}</code>

<code class="js">document.querySelector('img').addEventListener('mouseover', () => {
  document.querySelector('img.colored').style.opacity = 1;
  document.querySelector('img.grayscale').style.opacity = 0;
});

document.querySelector('img').addEventListener('mouseout', () => {
  document.querySelector('img.colored').style.opacity = 0;
  document.querySelector('img.grayscale').style.opacity = 1;
});</code>

Menggunakan Penapis SVG (IE10 Sahaja)

Gunakan SVG sebaris dengan penapis untuk menggunakan kesan tepu dan menukarnya pada tetikus:

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

Dengan melaraskan nilai tepu, anda boleh mengawal tahap skala kelabu. Kaedah ini disokong dalam IE10 dan lebih tinggi.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta imej skala kelabu dengan CSS yang mewarna semula pada tetikus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!