Múltiplos backgrounds com CSS

Uma das features mais esperadas por mim é sem dúvida a possibilidade de podermos definir múltiplos backgrounds via CSS. Chega de elementos extras e gambiarras. No CSS3 a propriedade background ganha várias funções, dentro elas a possibilidade de definirmos várias imagens como background em um único elemento. A sintaxe é muito simples. Na verdade, é

Uma das features mais esperadas por mim é sem dúvida a possibilidade de podermos definir múltiplos backgrounds via CSS. Chega de elementos extras e gambiarras. No CSS3 a propriedade background ganha várias funções, dentro elas a possibilidade de definirmos várias imagens como background em um único elemento.

A sintaxe é muito simples. Na verdade, é idêntica a sintaxe existente. Segue abaixo:

[cc lang=”css”]

div {

width:600px;

height:500px;

border:1px solid black;

background:

url(gradiente-top.png) top left repeat-X,

url(gradiente-baixo.png) bottom left repeat-X,

url(gradiente-esquerda.png) top left repeat-Y,

url(gradiente-direita.png) top right repeat-Y;

}

[/cc]

Veja que basta definirmos diversas vezes a propriedade URL com as imagens que escolher e pronto. Os atributos de posição e repetição continuam iguais!

É tão simples que dispensa grandes explicações. No exemplo acima usei 4 imagens em gradiente transparente. Duas para os lados e as outras duas para o topo e baixo.

Testando com o HTML

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *