Syntaxe více pozadí - Triky CSS

Anonim

Prohlížeče, které podporují více pozadí (WebKit od samého počátku, Firefox 3+) používají tuto syntaxi:

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

Jsou to hodnoty oddělené čárkami a může jich být tolik, kolik chcete s různými hodnotami URL, umístění a opakování. Můžete dokonce kombinovat přechody WebKit do mixu:

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

Stará škola IE na Macu by zobrazila první pozadí v seznamu, ale jiné prohlížeče, které ji nepodporují, selhávají tvrdě a prostě nezobrazují žádné pozadí. To z něj dělá těžký důvod pro postupné vylepšování. To znamená, pokud nepoužíváte nástroj jako Modernizr k detekci jeho podpory a zápisu záložního selektoru, který deklaruje pouze jedno pozadí pro prohlížeče, které jej nepodporují.