Gibt es eine Möglichkeit, das Erscheinungsbild eines Symbols (z. B. Kontrast/Helligkeit) zu ändern, wenn ich den Mauszeiger bewege, ohne eine zweite Bilddatei zu benötigen (oder ohne einen versteckten Teil des Bildes zu benötigen)?Kann ich das Aussehen eines HTML-Bildes während des Schwebens ohne ein zweites Bild ändern?
Here's some good information about image opacity and transparency with CSS.
So ein Bild mit einer Undurchsichtigkeit von 50% zu machen, werden Sie dies tun:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
Der Opazität: Teil ist, wie Firefox es funktioniert, und es ist ein Wert zwischen 0,0 und 1,0. filter: ist IE, und es ist ein Wert von 0 bis 100.
Die Art und Weise, wie ich normalerweise Dinge mit kleineren Bildern wie Schaltflächen gemacht, dass nur ein bestimmter Teil des Bildes angezeigt wird. Dann werden viele Zustände des Bildes ein größeres Bild ergeben, das hinter dem sichtbaren Port verschoben wird. Ich lösche dies, wenn jemand Code hat.
Sie verwenden kein IMG-Tag, aber ein Element mit einem Hintergrundbild CSS-Attribut und legen Sie die Hintergrundposition bei Hover . IE erfordert ein "a" -Tag als übergeordnetes Element für den: Hover-Selektor. Sie werden Css-Sprites genannt.
Hier ist ein Code zum Spielen. Grundidee: alle möglichen Zustände des Bildes in ein großes Bild bringen, eine "Fenstergröße" einstellen, die kleiner ist als das Bild; Verschieben Sie das Fenster mit background-position.
#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>FWIW Dies wird üblicherweise als "Sprite" bezeichnet. http://css-tricks.com/css-sprites/ –
IE7 + unterstützt der: Pseudo Selektor auf alle Elemente schweben. –
Eigentlich erklärt der Artikel nicht wirklich, was der Vorteil von CSS-Sprites ist. Ich stelle mir vor, dass der Punkt das schnellere Laden neuer Seiten ist (weil Sie den Browser dazu "tricksen", alle Bilder auf einmal herunterzuladen). – Marcin