CSS3 Fundo (Background)

usando CSS3pode aplicar múltiplos fundos ao elemento.

usando CSS3Fundo

CSS3fornecido com várias novas propriedades para manipular o fundo do elemento, por exemplo, recorte de fundo, múltiplos fundos e opções de ajuste do tamanho do fundo.

A próxima seção vai apresentar para você CSS3todas as novas funcionalidades de fundo, sobre outras propriedades relacionadas ao fundo, consulteFundo CSStutorial.

CSS3 background-propriedade size

Este background-A propriedade size pode ser usada para especificar o tamanho da imagem de fundo. Em CSS3Antes disso, o tamanho da imagem de fundo era determinado pelo tamanho real da imagem. O tamanho da imagem de fundo pode ser especificado em pixels ou porcentagem de valor, bem como por palavras-chave como auto, contain e cover. Não é permitido usar valores negativos.

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　background: url("images/sky.jpg) sem-repeat;
　　　　background-size: contain;
　　　　border:　6px sólido #333;
}

CSS3 background-propriedade clip

background-A propriedade clip pode ser usada para especificar se o fundo do elemento deve estender até a borda. A propriedade background-A propriedade clip pode ter três valores: borda-box, padding-box, content-box。

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: laranja;
　　　　background-clip: conteúdo-box;
}

Por favor, consulteModelo de caixa CSSTutorial para saber mais sobre a caixa do elemento.

CSS3 background-A propriedade origin

Este background-A propriedade origin pode ser usada para especificar a área de localização da imagem de fundo. Ela pode assumir os mesmos valores que o background-A propriedade clip: border-box, padding-box, content-box。

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: url("images/sky.jpg) sem-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

CSS3várias cores de fundo

CSS3Permite que você adicione várias cores de fundo a um único elemento. As cores se sobrepoem uma à outra. O número de camadas é determinado porbackground-ou backgroundO número de valores separados por vírgula na propriedade abreviada determina.

.box {
　　　　width:　100%;
　　　　height:　500px;
　　　　background: url("images/url("images-repeat center,/clouds.png) sem-repeat center, lightblue;
}

A primeira valor da lista de separação de vírgulas do fundo (ou sejabackground-“‘birds.png’ será exibido no topobackground-color.