Kann ich das Aussehen eines HTML-Bild ohne ein zweites Bild während des Schwebens ändern?

StackOverflow https://stackoverflow.com/questions/60290

  •  09-06-2019
  •  | 
  •  

Frage

Gibt es eine Möglichkeit das Aussehen eines Symbols zu ändern (dh. Kontrast / Helligkeit), wenn ich bewegen Sie den Cursor, ohne eine zweite Bilddatei erforderlich ist (oder ohne einen verborgenen Teil des Bildes erforderlich ist)?

War es hilfreich?

Lösung

Hier einige gute Informationen über Bild Opazität und Transparenz mit CSS .

So ein Bild zu machen mit einer Undurchsichtigkeit von 50%, werden Sie dies tun: 

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

Die Opazität: Teil ist, wie Firefox tut es, und es ist ein Wert zwischen 0,0 und 1,0. Filter. ist, wie IE tut es, und es ist ein Wert von 0 bis 100

Andere Tipps

Sie haben keinen img-Tag verwenden, aber ein Element mit einem CSS-Attribute background-image und stellen Sie die Hintergrund-Position auf schweben. IE erfordert einen ‚a‘ tag als Mutterelement für den: Hover-Selektor. Sie sind CSS-Sprites genannt.

ein großer Artikel erklären, wie CSS-Sprites verwenden .

Hier ist ein Code zu spielen. Grundidee: setzen alle möglichen Zustände des Bildes in ein großes Bild, stellen Sie eine „Fenstergröße“, das ist kleiner als das Bild; verschieben Sie das Fenster um background-position verwendet wird. 

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
<a href="#" id="test">a button</a>

So wie ich in der Regel Dinge mit kleineren Bildern wie Schaltflächen es, dass nur ein bestimmter Teil des Bildes durchgeführt sehen gezeigt. Dann viele Staaten des Bildes wird eine größeres Bild bilden, die sich hinter dem sichtbaren Port wird verschoben um. Ich werde diese löschen, wenn jemand Code hat.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top