Mitme taustaga süntaks - CSS-trikid

Anonim

Mitut tausta toetavad brauserid (WebKit algusest peale, Firefox 3+) kasutavad sellist süntaksit:

#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )

Need on komadega eraldatud väärtused ja neid võib olla nii palju kui soovite erinevate URL-ide, positsioneerimis- ja korduvväärtustega. Võite isegi WebKiti gradiente kombineerida:

#box ( background: url(… /images/arrow.png.webp) 15px center no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); )

Vana kooli IE Macis kuvaks loendis esimese tausta, kuid muud brauserid, mis seda ei toeta, ebaõnnestuvad ja lihtsalt ei kuva tausta. See muudab selle järk-järguliseks täiustamiseks keeruliseks. See tähendab, et kui te ei kasuta selle toetuse tuvastamiseks sellist tööriista nagu Modernizr ja kirjutate varuvalija, mis deklareerib ainult ühe tausta brauserite jaoks, kes seda ei toeta.