Bild-substitution und den übergang mit css3?

Ich Frage mich, Ob jemand weiß eine clevere und neue Art und Weise, wie ein übergang zwischen zwei hintergrund-Bilder? Ich weiß das es mehrere tutorials gibt, nur die meisten von Ihnen sind veraltet und alt.

Ich Frage mich, ob es eine clevere und moderne CSS3 Weg, etwas zu tun wie dieser.

Habe ich ein einfaches logo.png-legen Sie die als hintergrund zu einem div.logo (ich will es als hintergrund-Bild nicht über img src). Und wenn ich den Mauszeiger über Sie ich möchte einen reibungslosen übergang zu "logo-hover.png" das ist die gleiche Datei, nur in einer anderen Farbe.

Irgendwelche Ideen, wie dies zu tun heute?

Mein Ansatz wäre dieser:
- Ich erstelle einen äußeren container um div.logo wich position relative. Ich position zwei divs mit position absolute übereinander. Die div.hover eingestellt ist display:none und wenn ich den Mauszeiger darüber schweben verwende ich css3 transition zu animieren Deckkraft.

Ist dies der einzige Weg, dies zu tun?
Ich würde eigentlich gerne eine Reine css Weg, wo ich nicht haben, um einen zusätzlichen div-Element mit dem hover-Zustand an den dom selbst.

Irgendwelche Ideen diesbezüglich?

Vielen Dank im Voraus.

InformationsquelleAutor matt | 2012-07-10
Schreibe einen Kommentar