Wie erreicht man Graustufen mit Farbwiederherstellung bei Mouseover mithilfe von CSS?

Graustufen mit Farbwiederherstellung bei Mouseover mit CSS

Das Erreichen eines Graustufen-Erscheinungsbilds mit Farbwiederherstellung bei Mouseover ist durch verschiedene Methoden möglich , wodurch browserübergreifende Kompatibilität sowohl im IE als auch in Firefox gewährleistet wird.

Methode 1: Reines CSS (Verwendung eines einfarbigen Bildes)

Diese Technik nutzt die Filtereigenschaft mit dem Hersteller Präfixe, um das Bild in allen unterstützten Browsern in Graustufen zu skalieren:

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

Methode 2: Reines CSS (Verwendung von zwei Bildern)

Ein anderer Ansatz beinhaltet die Verwendung von zwei Bildern: einem Graustufenbild Version und eine farbige Version. Das Graustufenbild wird zunächst angezeigt und der Hover-Status wechselt zum Farbbild:

<code class="css">img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}</code>

<code class="html"><img class="grayscale" src="grayscale_image.jpg">
<img class="colored" src="colored_image.jpg"></code>

Methode 3: SVG mit CSS-Filtern

Für IE10 und modernen Browsern kann Inline-SVG zum Anwenden von Filtern verwendet werden, wodurch der Graustufeneffekt dynamisch gesteuert werden kann:

<code class="css">svg image {
  transition: all .6s ease;
}

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

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

Das obige ist der detaillierte Inhalt vonWie erreicht man Graustufen mit Farbwiederherstellung bei Mouseover mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!