Több hátterű css3
Hello mindenkinek! Ebben a kis cikket megnézzük, hogyan kell beállítani több háttérképeket a CSS3.
HTML akkor megint ugyanaz
És egyszerű stílusban, hogy mi egység, amely aztán képet beszúrni
blokk szélessége: 700 képpont;
magasság: 400px;
átnyúló: 3px szilárd # 999;
margin: 20px;
background-image: url (img1.jpg);
background-repeat: no-repeat;
background-position: alul középen;
>
A background-image, akkor adja meg az útvonalat, hogy a kép, a background-repeat - hogy megismételje vagy ne ismételje meg a kép és a háttér-helyzetben a képet, akkor adja meg a pozícióját az egység: az első érték a vízszintes, a második függőlegesen. Az értékek is beállíthatók px.
Amikor a képet. akkor is használhatja színe. Ezután tegyük, ahol nincs kép, akkor tele lesz a kiválasztott színt.
block / *. * /
background-color: #ccc;
background-image: url (img1.jpg);
background-repeat: no-repeat;
background-position: alul középen;
>
Egy másik hasznos tulajdonság háttér-mellékletet. amely lehetővé teszi, hogy rögzítse a háttérben mindig ugyanabban a helyzetben nem számít, hogyan mozog a blokk.
background-méret, akkor átméretezi a képet.
háttér-méret: 50 képpont 200px;
Az első érték a vízszintes. második függőlegesen.
Továbbá, ez a tulajdonság lehet szöveges értékek: tartalmaz és a fedelet. Beállítása első érték, a kép méretezhető úgy, hogy teljes mértékben a jelen blokk, és egy második kép kitölti a tartály, és ha a hely nem elég, ott nem látszik.
Tehát áttekintettük az alapokat, és háttérképeket Most beszéljünk a több háttérrel.
A CSS3 azt a lehetőséget, hogy feltenni néhány háttérrel egy blokk. Ehhez egyszerűen listát a background-image egy második képet, vesszővel elválasztva
background-image: url (img1.png), url (img2.png);
Minden más stílus, mint a background-repeat, stb Ők fogják alkalmazni az összes kép. Beállíthatjuk, hogy a stílus minden háttér, akkor is fel kell sorolni, vesszővel elválasztva. Ezután, az első érték hivatkozik az első háttér, és a második - a második.
background-repeat: no-ismétlés,;
background-position: bal alsó, jobb center;
Szintén fontos megjegyezni, hogy az első képet a background-image felett jelenik meg a második, a második fent harmada, stb
A végén azt kell mondanunk, hogy mindezek a tulajdonságok kombinációja egyetlen tulajdonság háttérben.
background: url (img1.png) bal alsó no-repeat, url (img2.png) jobbközép ismétlés;
Ajánlom ezt a cikket egy ismerősének:
Ha tetszett az oldal, a link meg (az oldalon, a fórum, a kapcsolatot)
Úgy néz ki, mint ez:
Minden jó, de módszertanilag helyes példákat mutatnak oldalakon. A kötet az apró, sok helyen nem veszik, hanem az emberek azonnal uvidyat, miről van szó.