CSS3 Fundos
CSS3 contém algumas novas propriedades do fundo, que permitem maior controle do elemento de fundo.
Neste capítulo, você aprenderá como adicionar múltiplas imagens de fundo para um elemento.
Você também vai aprender sobre as seguintes novas propriedades CSS3:
-
background-size -
background-origin -
background-clip
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz- , ou -o- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Vários Fundos
CSS3 permite adicionar múltiplas imagens de fundo para um elemento, através do background-image propriedade.
As diferentes imagens de fundo são separados por vírgulas, e as imagens são empilhados em cima uns dos outros, em que a primeira imagem é o mais próximo do espectador.
O exemplo a seguir tem duas imagens de fundo, a primeira imagem é uma flor (alinhado à parte inferior e direita) ea segunda imagem é um fundo de papel (alinhado com o canto superior esquerdo):
Exemplo
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Tente você mesmo " Várias imagens de fundo podem ser especificados utilizando as propriedades do fundo individuais (como acima) ou o background propriedade estenográfica.
O exemplo a seguir usa o background propriedade estenográfica (mesmo resultado que o exemplo acima):
Exemplo
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Tente você mesmo " Tamanho CSS3 fundo
O CSS3 background-size propriedade permite que você especifique o tamanho de imagens de fundo.
Antes CSS3, o tamanho de uma imagem de fundo foi o tamanho real da imagem. CSS3 nos permite reutilizar imagens de fundo em diferentes contextos.
O tamanho pode ser especificado em comprimentos, porcentagens, ou usando uma das duas palavras-chave: conter ou tampa.
O exemplo a seguir redimensiona uma imagem de fundo para muito menores do que a imagem original (usando pixels):
Imagem original de fundo:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
background image redimensionada:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Aqui está o código:
Exemplo
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Tente você mesmo " Os outros dois valores possíveis para background-size estão contain e cover .
O contain palavra-chave dimensiona a imagem de fundo a ser tão grande quanto possível (mas tanto a sua largura e sua altura deve caber dentro de área de conteúdo). Como tal, dependendo das proporções da imagem de fundo e uma área de posicionamento do fundo, pode haver algumas áreas do plano de fundo, que não estão cobertas pela imagem de fundo.
A cover palavra-chave dimensiona a imagem de fundo para que a área de conteúdo é completamente coberta pela imagem de fundo (ambos a sua largura e altura são iguais ou excedem a área de conteúdo). Como tal, algumas partes da imagem de fundo pode não ser visíveis na área de posicionamento do fundo.
O exemplo a seguir ilustra o uso de contain e cover :
Exemplo
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Tente você mesmo " Definir tamanhos de fundo Múltiplas Imagens
O background-size propriedade também aceita vários valores para o tamanho do fundo (usando uma lista separada por vírgula), quando se trabalha com várias origens.
O exemplo a seguir tem três imagens de fundo especificado, com diferentes background-size valor para cada imagem:
Exemplo
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Tente você mesmo " Full Size Imagem de Fundo
Agora nós queremos ter uma imagem de fundo em um site que cobre toda a janela do navegador em todos os momentos.
Os requisitos são os seguintes:
- Preencher a página inteira com a imagem (nenhum espaço em branco)
- Escala da imagem conforme necessário
- Centralizar imagem na página
- Não causam barras de rolagem
O exemplo a seguir mostra como fazê-lo; Use o elemento html (o elemento html é sempre pelo menos a altura da janela do navegador). Em seguida, defina um fundo fixo e centrado nele. Em seguida, ajustar o seu tamanho com o background-size de propriedade:
Exemplo
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Tente você mesmo " CSS3 background-origin Property
O CSS3 background-origin propriedade especifica onde a imagem de fundo está posicionado.
A propriedade tem três valores diferentes:
- border-box - a imagem de fundo começa a partir do canto superior esquerdo da fronteira
- padding-box - (padrão) a imagem de fundo começa a partir do canto superior esquerdo da borda estofamento
- content-box - a imagem de fundo começa a partir do canto superior esquerdo do conteúdo
O exemplo a seguir ilustra o background-origin da propriedade:
Exemplo
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Tente você mesmo " CSS3 background-clip Propriedade
O CSS3 background-clip propriedade especifica a área de pintura de fundo.
A propriedade tem três valores diferentes:
- border-box - (padrão) o plano de fundo é pintado para a borda externa da fronteira
- padding-box - o fundo é pintado para a borda externa do estofamento
- content-box - o fundo é pintada dentro da caixa de conteúdo
O exemplo a seguir ilustra o background-clip propriedade:
Exemplo
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Propriedades CSS3 Fundo
| Propriedade | Descrição |
|---|---|
| background | Um atalho para definir todas as propriedades do fundo em uma declaração |
| background-clip | Especifica a área de pintura do fundo |
| background-image | Especifica uma ou mais imagens de fundo para um elemento |
| background-origin | Especifica em que a imagem (s) de fundo é / são posicionados |
| background-size | Especifica o tamanho da imagem de fundo (s) |