background-imageNehnuteľnosť v CSS sa týka grafiky (napr PNG, SVG, JPG.webp, GIF, WebP) alebo prechod na pozadí prvku.
Do CSS môžete zahrnúť dva rôzne typy obrázkov: bežné obrázky a prechody.
snímky
Použitie obrázka na pozadí je veľmi jednoduché:
body ( background: url(sweettexture.jpg.webp); )Táto url()hodnota vám umožňuje poskytnúť cestu k súboru k ľubovoľnému obrázku a zobrazí sa ako pozadie pre tento prvok.
Môžete tiež nastaviť dátový URI pre url(). Vyzerá to takto:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Táto technika odstráni jednu požiadavku HTTP, čo je dobré. Existuje však niekoľko negatívnych stránok, takže predtým, ako začnete vymieňať všetky svoje obrázky, nezabudnite vziať do úvahy všetky výhody a nevýhody dátových identifikátorov URI.
Môžete tiež použiť background-imagena sprite obrázky, čo je ďalšia užitočná metóda na zníženie požiadaviek HTTP.
Prechody
Ďalšou možnosťou pri použití pozadia je povedať prehliadaču, aby vytvoril prechod. Tu je superduper jednoduchý príklad lineárneho gradientu:
body ( background: linear-gradient(black, white); )Môžete tiež použiť radiálne prechody:
body ( background: radial-gradient(circle, black, white); )Z technického hľadiska sú prechody iba ďalšou formou obrázka na pozadí. Rozdiel je v tom, že obrázok vytvorí prehliadač. Takto ich napíšete: Syntax gradientu CSS3
Vyššie uvedený príklad používa iba jeden prechod, ale môžete na ne tiež vrstviť viac prechodov. Pomocou tejto techniky môžete vytvoriť niekoľko úžasných vzorov.
Nastavenie záložnej farby
Ak sa obrázok na pozadí nepodarí načítať alebo sa vaše pozadie s prechodom zobrazí v prehliadači, ktorý nepodporuje prechody, bude prehliadač hľadať farbu pozadia ako záložnú. Svoju záložnú farbu môžete určiť takto:
body ( background: url(sweettexture.jpg.webp) blue; )Viac obrázkov na pozadí
Pre pozadie môžete použiť viac obrázkov alebo ich kombináciu a prechody. Teraz je dobre podporovaných viac obrázkov na pozadí (všetky moderné prehliadače a IE9 + pre grafické obrázky, IE10 + pre prechody).
Ak používate viac obrázkov na pozadí, uvedomte si, že existuje trochu proti-intuitívne poradie stohovania. Najprv uveďte obrázok, ktorý by mal byť vpredu, a posledný obrázok, ktorý by mal byť vzadu:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Ak používate viac obrázkov na pozadí, budete musieť často nastaviť viac hodnôt pre pozadie, aby bolo všetko na správnom mieste. Ak chcete použiť backgroundskratku, môžete nastaviť hodnoty pre každý obrázok zvlášť. Vaša skratka bude vyzerať asi takto (všimnite si čiarku oddeľujúcu prvý obrázok a jeho hodnoty od druhého obrázka a jeho hodnôt):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Počet obrázkov na pozadí, ktorý môžete nastaviť, nie je nijako obmedzený. Môžete tiež robiť zaujímavé veci, ako je napríklad animácia obrázkov na pozadí. V blogu Davida Walsha je dobrý príklad viacerých obrázkov na pozadí s animáciou.
Ukážka
Prezrite si obrázok pozadia pera od CSS-Tricks (@ css-tricks) na CodePen.
Súvisiace
- príloha na pozadí
- klip na pozadie
- farba pozadia
- pôvod pozadia
- Pozícia na pozadí
- opakovanie pozadia
- veľkosť pozadia
Ďalšie zdroje
- Špecifikácia CSS3
- MDN
- Perfektné obrázky na pozadí celej stránky
- Zvládnutie prechodov CSS (Slideeck)
Podpora prehľadávača
Pravidelné obrázky fungujú všade a viac obrázkov funguje v moderných prehliadačoch a IE9 +. Tu je podpora prechody:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5,1+ | 3,6+ | 12,1+ | 10+ | 4+ | 5,1+ |