Sintaxe de vários fundos - CSS-Tricks

Anonim

Navegadores que suportam vários fundos (WebKit desde os primeiros dias, Firefox 3+) usam uma sintaxe como esta:

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

Eles são valores separados por vírgula e podem haver quantos você quiser com diferentes URLs, posicionamento e valores de repetição. Você pode até combinar gradientes WebKit na mistura:

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

O IE antigo no Mac exibiria o primeiro plano de fundo da lista, mas outros navegadores que não o suportam falham muito e simplesmente não exibem nenhum plano de fundo. Isso o torna um caso difícil para aprimoramento progressivo. Ou seja, a menos que você use uma ferramenta como o Modernizr para detectar o suporte para ele e escreva um seletor de fallback que declara apenas um plano de fundo para navegadores que não o suportam.