Hogyan lehet, hogy a kép megváltozott html

Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Cserélje egyik képről a másikra, ha lebeg felette az egérmutatót.

: Hover pszeudo osztály

Ábra. Az 1. ábra két kép: az eredeti (1a ábra.) És a helyettesítő (1b ábra.).

Ábra. 1. Az a festmény, hogy hozzon létre élőpontokkal

Példa 1. A pszeudo: lebeg

A fenti módszer ugyan könnyen megvalósítható, de van egy bizonyos hátrányt. Mivel a második kép betöltődik csak, ha lebeg a kurzort a link, akkor a kép folyik a szünet. Ahhoz, hogy megszüntesse ezt a késleltetést, akkor nem használhatja a két kép, de csak egy.

gördülő hatást egyetlen minta

Úgy tűnik, hogy van egy ellentmondás, mert a hatása gördülő, hogy cserélje ki az egyik rajzból a másikba, hogyan tegye a képet? Tény, hogy nem lesz két kép (ábra. 2), de lesznek tárolni egyetlen képfájl.

Ábra. 2. kép a két kép

Változás az egyik alak egy másik, a Képeltolás függőlegesen a használata univerzális tulajdon háttér vagy háttér-helyzetben, amint azt a 2. példában.

Példa 2. Változás mintázat pozíciójához

A választó be van állítva a háttérképet keresztül tulajdonság háttér, a szélesség (szélesség) egybeesik egy mintát, és a magasság (magasság tulajdonság) felével egyenlő kép magasságának. Ennek eredményeként, az eredeti zöld fület meg kell jeleníteni teljes egészében.

Amikor az egérrel egy linket háttér mozog akár a fele a magassága a kép (40 képpont) a background-position és láthatóvá válik narancssárga fület.

Hogyan lehet, hogy a kép megváltozott html fotó