O melhor tutorial fundo CSS3 em 2024. Neste tutorial você pode aprender fundo CSS3,Suporte a navegadores,CSS3 propriedade background-image,Exemplos,Exemplos,CSS3 propriedade background-size,exemplo 1,exemplo 2,atributo background-Origem do CSS3,Exemplos,múltiplas imagens de fundo CSS3,Exemplos,CSS3 propriedade background-clip,Exemplos,Novas propriedades do fundo,
CSS3 contém várias novas propriedades fundo, proporcionando maior elementos de fundo de controle.
Neste capítulo, você vai aprender sobre as seguintes propriedades do fundo:
Você também vai aprender a usar várias imagens de fundo.
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
propriedade | |||||
---|---|---|---|---|---|
background-image (Com vários fundos) | 4.0 | 9 | 3.6 | 3.1 | 11,5 |
background-size | 4.0 1.0 -webkit- | 9 | 4.0 3.6 -moz- | 4.1 3.0 -webkit- | 10.5 10,0 -o- |
background-origem | 1.0 | 9 | 4.0 | 3.0 | 10.5 |
background-clipe | 4.0 | 9 | 4.0 | 3.0 | 10.5 |
CSS3 pode adicionar uma imagem de fundo via propriedade background-image.
imagem de fundo diferente ea imagem separados por vírgulas, todas as imagens são exibidas na parte superior da primeira.
Você pode definir o número de propriedades diferentes para imagem diferente
fundo de tamanho especifica o tamanho da imagem de fundo. CSS3 atrás, o tamanho da imagem de fundo é determinada pelo tamanho real da imagem.
CSS3 pode especificar uma imagem de fundo, vamos re-especificar o tamanho da imagem de fundo em ambientes diferentes. Você pode especificar uma porcentagem ou pixel tamanho.
Pode especificar o tamanho é relativa à largura e altura do elemento pai tamanho percentagem.
Repor imagem de fundo:
Esticar a imagem de fundo para preencher completamente a área de conteúdo:
atributo background-Origem especifica a localização da área de imagem de fundo.
o conteúdo da caixa, pode ser colocado dentro padding-caixa, e área de border-box da imagem de fundo.
Posicionar uma imagem de fundo no conteúdo de caixa:
múltiplas imagens de fundo CSS3 | |
CSS3 permite elementos A adicionar várias imagens de fundo. |
Definir duas imagens de fundo do elemento do corpo:
CSS3 O fundo propriedade background-clip é cortado para começar a desenhar a partir do local especificado
ordem | descrição | CSS |
---|---|---|
background-clipe | Disposto no fundo da área de desenho. | 3 |
background-origem | região posicionamento imagem de fundo predeterminado. | 3 |
background-size | Imagem de fundo de um tamanho pré-determinado. | 3 |