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

Skala Kelabu Imej dengan CSS & Amp; Warna semula pada Mouse-over

Dalam siaran ini, kami akan meneroka cara mencapai kesan ini dan menyediakan keserasian merentas penyemak imbas.

CSS Tulen (Menggunakan hanya satu imej berwarna)

Untuk kaedah pertama, kami menggunakan CSS tulen dan hanya satu imej:

<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>

Menggunakan SVG

Kaedah ini menggunakan SVG sebaris untuk mencipta kesan skala kelabu dan imej berasingan untuk versi warna:

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

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  ...
  <image filter="url(&quot;#filtersPicture&quot;)" ... />
   </svg></code>

JavaScript

Akhir sekali, kita boleh menggunakan JavaScript untuk menukar sumber imej pada tuding:

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

<code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');

grayscaleImages.forEach(image => {
  image.addEventListener('mouseover', () => {
    image.src = 'path/to/color_image.jpg';
  });

  image.addEventListener('mouseout', () => {
    image.src = 'path/to/grayscale_image.jpg';
  });
});</code>

Ini kaedah menyediakan keserasian merentas pelayar dan membolehkan anda menambah kesan skala kelabu dan tuding pada imej anda dengan mudah.

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