Személyes blog Madison css háttérrel és több háttérképeket css3
Háttér - a tulajdonságot, amely lehetővé teszi, hogy a háttér elem. A háttér lehet színes vagy akár tartalmú képeket. Ebben a cikkben fogok beszélni minden jellemzője az ingatlan, és azt mutatják, trükk, amellyel a háttér objektumot tud több képet.
Bárki, aki valaha is nyit egy tutorial, HTML. Tud a tulajdonságok, amelyek meghatározzák az elem háttere:
Szöveg szöveg szöveg.
A CSS-ben úgy egyesül egy dolog közös - háttérben.
Szöveg szöveg szöveg.
Annak vizsgálatára, az ingatlan, a „helyszínen”, próbálja alkalmazni azt az egyszerű mondat
Így találkozik, ez a mi ↑
Szóval van egy kis szórakozás, nem igaz? A szín lehet meghatározni különböző módon: Név (narancs), hat-jelek HEX (# ff8c00) vagy RGB (255,165,0). Folyamodva nevek ritkán, mivel a különböző böngészők néha különböző nevek felelnek meg kissé eltérő színeket. Leggyakrabban a szín jelöli hat jeleket.
Mindhárom értékek jelentik ugyanazt narancs színű. Színes rendezve. Most szeretnénk felvenni hozzá háttérképet. Például így:
A lényeg az, hogy a kép dísz egyenletesen ismételni. Ha valaki érdeklődik, tudok ajánlani egy jó generátor csíkos háttérrel. Nem számít az összes képpont magukat.
Most a díva nem csak narancssárga, hanem csíkos.
„Legkotnya - mondod -. Ugyanez megtehető a bgcolor és a háttér nélkül CSS!”
Jobb. Ezért úgy véljük, a bonyolultabb ügy, amelyben nem tudunk egyetlen HTML-én. Tegyük fel, hogy szeretnénk, hogy a háttérben itt van a helyszínen:
Most díva lett foltos. Nem akarunk olyan sok foltok. Biztosítsuk, hogy mi pontszerűen megismételtük csak vízszintesen.
Vagy csak függőlegesen.
Vagy talán jobb, ha egyetlen helyen?
Igen, egy pont is elég, de ezt csak az útjába. Haladjunk a központban is.
Talán a legjobb a jobb alsó sarokban?
Az elv világos? Példák lehet folytatni a végtelenségig. Hogy akkor majd nem is álmodott ezeket narancssárga téglalap példákkal befejezem és felírom le az összes lehetséges értékei az ingatlanok háttér alábbi
background-color: red; - piros neve
background-color: # FF0000; - piros színű HEX kód
background-color: rgb (255,0,0); - piros színű RGB
background-color: átlátszó; - átlátszó szín
background-repeat: repeat; - görgetés háttér függőlegesen és vízszintesen
háttér-repeat: repeat-x; - lapozzunk a háttérben csak vízszintesen
background-repeat: repeat-y; - lapozzunk a háttérben csak függőlegesen
background-repeat: no-repeat; - ne lépjünk háttér
background-position: 40% -ról 70%; - a kép 40% a bal széle a képernyő és a 70% -a a felső széle a képernyő
background-position: 200px 500px; - A kép 200 képpont jobbra balra a képernyő szélén, és 500 pixel teteje alatt a képernyő szélén
background-position: balra fent; - a bal felső sarokban
background-position: bal center; - bal oldalon a képernyő
background-position: bal alsó; - a bal alsó sarokban
background-position: jobb felső; - a jobb felső sarokban
background-position: jobb center; - jobb oldalon a képernyő
background-position: jobb alsó; - jobb alsó sarokban
background-position: center tetején; - a Top Center
background-position: center center; - a képernyő közepén
background-position: center alján; - az alsó középső
háttér-attachment: fixed; - görgetés közben az oldalt háttérképet áll még
háttér-attachment: scroll; - görgetés közben az oldalt háttérképet megy tartalmával együtt
Ez mind lehetséges értékeket. Csak azért, hogy ne festeni őket több vonal, mint ez a verzió:
Ezek kedvéért általában betömködjük tömörebb változata:
Ebben a leírásban lehet fejezni, de előtte, hogy meg akarom mutatni neked egy token, amelyen ő írta a bevezetőben -, hogyan kell rögzíteni egy tárgy több háttérképeket. Figyelmeztetem: ez nem fog működni egyáltalán, mert nem minden böngésző támogatja a CSS3. Tehát mi Megmutatom, akkor AUX, de semmi esetre sem nem támaszkodnak meg teljesen.
Emlékezzünk az utóbbi időben a narancssárga téglalap. Eddig belé helyezett, illetve csíkok vagy pöttyök. Mi van, ha azt akarjuk, hogy nem mind? A CCS3 lehet alkalmazni korlátlan számú kép, csak a háttérben tulajdon megosztása pontot.
Mondja, hogy „viszlát”, hogy a hosszú szenvedés díva és most gondoljunk egy kicsit bonyolultabb, hogy hol kell tartalmaznia számos különböző képek és szétosztjuk őket szemközti oldalára. Vegyük például a jól ismert minta, „The Hobbit” című ARCSIN. Nyisd az eredeti változata a sablon. hogy azt a szeme előtt. Háttér az alábbi darabokat:
alap háttér
megismételjük, és függőlegesen gorizonatali