2010-04-15 13 views
13

Ich möchte ein Bild auf meiner Webseite bei mouseover mit CSS oder Javascript aufhellen. Ich habe einige Beispiele mit Opazität und Filtern in Stilen gesehen, aber sie scheinen nicht für mich zu arbeiten.Ein Bild mit Styles oder Javascript aufhellen

Vielen Dank im Voraus

CP

+0

Es wäre hilfreich, wenn Sie konkreter angeben könnten, was Sie bereits versucht haben. –

Antwort

19

[UPDATE]

Eine reine CSS-Lösung wäre CSS filters zu verwenden:

img:hover { 
    filter: brightness(1.5); 
} 

Hier fügen wir 50% Helligkeit für alle Bilder beim Schweben.


Warum nicht? Sie können den Hintergrund des übergeordneten Containers immer auf #fff (weiß) setzen und dann die Deckkraft des Bildes verringern.

HTML:

<div class="white"> 
    <img src="image.jpg" alt="Image" /> 
</div> 

CSS:

.white { background: #fff; } 
img:hover { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

Eine andere Lösung ist es, eine JavaScript-Bibliothek, wie Pixastic zu verwenden.

+2

Ich realisiere CSS Mathew

+1

Hinzugefügt einen anderen Vorschlag, auch die Verwendung von Pixastic: http://www.pixastic.com/lib/docs/actions/lighten/ – Mickel

+0

Ich bekomme den Fehler Filter ist keine bekannte CSS-Eigenschaft Name Opazität ist nicht eine bekannte CSS-Eigenschaft Name –

0

würde ich etwas liek verwenden:

filter: alpha(opacity=80); 
    opacity: 0.8; 

Soweit ich weiß, ist dies die einzige Möglichkeit, es in CSS zu erreichen. Sind Sie danach?

+0

Ja, ich kann es bekommen, um das Bild zu erhellen, aber es funktioniert nicht auf mouseover, also muss ich etwas falsch machen! img class = "mouseover" .mouseover img { Opazität: 0,3; Filter: Alpha (Opazität = 30); } –

+0

In diesem Fall ändern Sie das zu: img.mouseover: Hover {etc.} – Ryan

+0

die Klasse muss sofort nach dem Tag kommen. dann der Selektor, gleich danach. so: tag.class: selector {etc.} – Ryan

1

Sie könnten CSS-Sprites verwenden. Erstellen Sie 2 Versionen des Bildes: eine normale, eine helle und kombinieren Sie sie in 1 Bild mit Photoshop oder was auch immer Sie verwenden.

Es gibt eine gute Erklärung der CSS-Sprites here.

Natürlich könnte dies nicht etwas sein, das Sie auf Ihrer Website verwenden könnten. Zum Beispiel ist es wahrscheinlich nicht etwas, das Sie für große Bilder verwenden möchten (sie würden sich verdoppeln). Sie könnten es auch nicht so machen, wenn die Bilder, die Sie aufhellen möchten, von externen Quellen kommen oder von Benutzern hochgeladen werden. Es würde gut für Dinge wie Navigationsleiste Bilder und andere UI-Elemente funktionieren.

Verwandte Themen