Wie erstelle ich mithilfe von CSS ein Graustufenbild, das bei Mouseover seine Farbe ändert?

CSS-Graustufen mit Mouseover-Neufärbung

Abfrage:

Erstellen Sie ein Bild, das zunächst Graustufen aufweist, aber zu wechselt Farbe, wenn die Maus darüber fährt. Implementieren Sie dies mit IE- und Firefox-kompatiblen CSS-Techniken.

Lösungen:

Reines CSS (mit einfarbigem Bild):

Diese Methode nutzt CSS-Filter um den Graustufeneffekt zu erzielen und den Filter beim Schweben zu entfernen, um die Originalfarbe anzuzeigen:

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

Inline-SVG mit CSS-Übergängen:

Dieser Ansatz bettet ein SVG-Element in ein Bild ein und wendet CSS an Übergänge zum Überblenden zwischen Graustufen und Farbe beim Schweben:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS ein Graustufenbild, das bei Mouseover seine Farbe ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!