Kelių fonų sintaksė CSS-gudrybės

Anonim

Naršyklės, palaikančios kelis fonus („WebKit“ nuo pat pradžių, „Firefox 3+“), naudoja tokią sintaksę:

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

Jos yra kableliais atskirtos vertės ir jų gali būti tiek, kiek norite su skirtingais URL, padėties nustatymo ir pakartojimo vertėmis. Jūs netgi galite sujungti „WebKit“ gradientus į mišinį:

#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)); )

Senosios mokyklos „IE“ sistemoje „Mac“ sistemoje bus pateiktas pirmasis fonas, tačiau kitos naršyklės, kurios jo nepalaiko, sugenda ir tiesiog nerodo fono. Tai tampa sudėtingu laipsniško tobulinimo atveju. Tai yra, nebent naudosite tokį įrankį kaip „Modernizr“, kad aptiktumėte jo palaikymą ir parašytumėte atsarginį parinkiklį, kuris deklaruoja tik vieną foną naršyklėms, kurios jo nepalaiko.