Link original: Planos de fundo em CSS: tudo o que você precisa saber
Link de tradução: guia de antecedentes CSS
Por favor, mantenha os direitos autorais e links ao reimprimir
O histórico é uma parte importante do CSS e um dos conhecimentos básicos de CSS que você precisa saber. Este artigo cobrirá o uso básico do plano de fundo css (plano de fundo), incluindo atributos como anexo de plano de fundo, etc., e também apresentará algumas técnicas comuns sobre plano de fundo (plano de fundo), bem como o plano de fundo (plano de fundo) em css3 (incluindo 4 nova a propriedade background).
Plano de fundo em css2
Visão geral
Existem 5 propriedades principais de plano de fundo no CSS2, são elas:
Todas essas propriedades podem ser combinadas em uma propriedade abreviada: background. Um ponto importante a ser observado é que o plano de fundo ocupa toda a área de conteúdo do elemento, incluindo preenchimento e borda, mas não inclui a margem do elemento. Funciona bem no Firefox, Safari, Opera e IE8, mas no IE6 e IE7 o fundo não inclui a borda.
Propriedades básicas
cor de fundo
A propriedade background-color preenche o fundo com uma cor sólida. Há muitas maneiras de especificar essa cor e todos os métodos a seguir fornecem o mesmo resultado.
cor de fundo: azul;
cor de fundo: rgb(0, 0, 255);
cor de fundo: #0000ff;
A cor de fundo também pode ser definida como transparente, o que torna visíveis os elementos abaixo dela.
imagem de fundo
O atributo background-image permite especificar uma imagem a ser exibida em segundo plano. Pode ser usado em conjunto com a cor de fundo, portanto, caso a imagem não se repita, as áreas não cobertas pela imagem serão preenchidas com a cor de fundo. O código é muito simples, basta lembrar que o caminho é relativo à folha de estilos, portanto no código a seguir a imagem e a folha de estilos estão no mesmo diretório.
imagem de fundo: url(imagem.jpg);
Mas se a imagem estiver em um subdiretório chamado imagens, deveria ser:
imagem de fundo: url(imagens/image.jpg);
Tangbantomatoes: Use ../ para indicar o diretório de nível superior, como background-image: url(../images/image.jpg); indicando que a imagem está localizada no subdiretório de imagens no diretório de nível superior do folha de estilos. É um pouco complicado, mas todos já deveriam saber disso, então não vou entrar em detalhes. Observação de front-end Todos os direitos reservados, guarde o link ao reimprimir.