tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Fundos


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)