A background-imageCSS-ben lévő tulajdonság grafikát (pl. PNG, SVG, JPG.webp, GIF, WEBP) vagy színátmenetet alkalmaz egy elem hátterére.
A CSS-sel két különböző típusú kép vehető fel: normál képek és színátmenetek.
Képek
Kép használata a háttérben nagyon egyszerű:
body ( background: url(sweettexture.jpg.webp); )Az url()érték lehetővé teszi fájl elérési útjának megadását bármelyik képhez, és ez az elem háttérként jelenik meg.
Adat URI-t is beállíthat a url(). Ez így néz ki:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Ez a technika eltávolít egy HTTP-kérést, ami jó. Számos hátránya van, ezért mielőtt az összes képet lecserélné, mindenképpen vegye figyelembe az Data URI összes előnyét és hátrányát.
Használhat background-imageképeket is, amelyek szintén hasznos módszerek a HTTP kérések csökkentésére.
Színátmenetek
Egy másik lehetőség a hátterek használatakor az, ha a böngészőnek szólít meg egy gradiens létrehozását. Íme egy nagyon egyszerű példa a lineáris gradiensre:
body ( background: linear-gradient(black, white); )Radiális gradienseket is használhat:
body ( background: radial-gradient(circle, black, white); )Technikailag elmondható, hogy a színátmenetek csak a háttérkép egyik formája. A különbség az, hogy a böngésző készíti el a képet az Ön számára. Így írhatjuk őket: CSS3 gradiens szintaxis
A fenti példa csak egy színátmenetet használ, de több színátmenetet is egymásra rétegezhet. Van néhány egészen elképesztő minta, amelyet létrehozhat ezzel a technikával.
Tartalék szín beállítása
Ha a háttérkép betöltése nem sikerül, vagy ha a színátmenet hátterét egy olyan böngészőben tekintik meg, amely nem támogatja a színátmeneteket, akkor a böngésző háttérszínt keres vissza. A következő színt adhatja meg:
body ( background: url(sweettexture.jpg.webp) blue; )Több háttérkép
A hátteréhez több képet, vagy képek és színátmenetek keverékét is felhasználhatja. A több háttérkép már jól támogatott (az összes modern böngésző és az IE9 + a grafikus képekhez, az IE10 + a színátmenetekhez).
Ha több háttérképet használ, ne feledje, hogy van egy kissé ellentmondó intuitív halmozási sorrend. Sorolja fel azt a képet, amelynek először elöl kell lennie, és hátul utoljára, így:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Ha több háttérképet használ, gyakran több értéket kell beállítania a háttérhez, hogy minden a megfelelő helyre kerüljön. Ha a backgroundgyorsírást szeretné használni , akkor az egyes képek értékeit külön-külön állíthatja be. A gyorsírása ilyennek fog kinézni (vegye észre az vesszőt, amely elválasztja az első képet és annak értékeit a második képtől és értékeitől):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Nincs korlátozva, hogy hány háttérképet állíthat be, és jó dolgokat tehet, például animálhatja a háttérképeit. Jó példa több animációs háttérképre David Walsh blogján.
Demó
Lásd a CSS-Tricks toll háttérképét (@ css-tricks) a CodePen-en.
Összefüggő
- háttér-kötődés
- háttér-klip
- háttérszín
- háttér-eredet
- háttér-helyzet
- háttérismétlés
- háttérméret
További források
- A CSS3 specifikációja
- MDN
- Tökéletes teljes oldalú háttérképek
- A CSS színátmenetek elsajátítása (Slidedeck)
Böngésző támogatás
A rendszeres képek mindenhol működnek, és több kép működik a modern böngészőkben és az IE9 + rendszerben. Íme a színátmenetek támogatása:
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3,6+ | 12.1+ | 10+ | 4+ | 5.1+ |