A háttértábla offsetje a blokkon kívül, mnogoblog
Folytassuk a pszeudo-elem használatát a cikk előtt és ebben a cikkben, lehetővé téve számunkra, hogy létrehozzuk a háttérkép eltolódását az ablak, a blokk felett.
Az alábbi cikk forrása letölthető
Nézzük ezt a példát.
Ezt a háttérképet jobb oldalról lehet elhelyezni
alul, mert egy pszeudo-elemet használ, hogy kiegészítő jelleggel járjon el
háttér vászon.
A CSS3 háttérmodul
számos böngészőben megvalósított. A pszeudo-elem technika szintén rendelkezik
hozzáadott előnye annak, hogy képesek vagyunk visszafejteni a háttérképet és akár a pozíciót
részben, teljesen.
Ügyeljen a dobozra - ez a kép a háttérképgel, és a blokkon kívül található!
Végezze el ezt a hatást elég egyszerű.
Most csak illessze be a div blokkot, később hozzárendeljük a kívánt stílushoz, ami létrehozza a fenti hatást.
Bár semmi különös, csak egy blokk a div és a szöveg.
Ezután meg kell nyitnunk webhelyünk stílusfájlját (style.css), és meg kell adnunk a következő stílust ehhez a blokkhoz (div id = "position-box"):
Elemezzük a blokk stíluskódját, amelyet az ízlésed szerint módosíthatunk.
A pozíció-mező azonosító felelős a blokk megjelenítési stílusáért.
A pozíció-doboz: az azonosító előtt hozzáadja a stílust a "pozíció-doboz" blokk előtt.
További információ a pozíció-dobozról:
Az első két paraméter (pozíció, z-index) nincs megérintve.
párnázás - a szövegrész behúzása a blokk felett, jobbról, alulról, balról.
határtalan határon a blokkban.
szín - a blokk szövegének színe (fff - fehér).
háttér - a blokk hátterének színe (4B92C0 - kék).
A szélesség a blokk szélessége.
Kísérletezzen a kóddal és érdekes vizuális effektekkel.
PS: Próbálj meg letölteni egy képet egy négyzetből a fenti példában (például a jobb egérgombbal) - nem teheted meg :) az ál-elemek egyik tulajdonsága.