Fundo do CSS
- Página anterior Cores HSL do CSS
- Próxima página Imagem de Fundo do CSS
As propriedades de background CSS são usadas para definir os efeitos de background dos elementos.
Nesses capítulos, você aprenderá as seguintes propriedades de background CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color
background-color A propriedade especifica a cor de fundo do elemento.
Exemplo
A configuração da cor de fundo da página é a seguinte:
body {
background-color: azul claro;
}
Pela CSS, as cores são geralmente especificadas da seguinte forma:
- Nomes de cores válidos - por exemplo "vermelho"
- Valores hexadecimal - por exemplo "#ff0000"
- Valores RGB - por exemplo "rgb(255,0,0)"
Por favor, consulte Valor de cor CSS，obter a lista completa de valores de cor possíveis.
Outros elementos
Você pode definir a cor de fundo para qualquer elemento HTML:
Exemplo
Aqui, os elementos <h1>, <p> e <div> terão cores de fundo diferentes:
h1 {
background-color: verde;
}
div {
background-color: azul claro;
}
p {
background-color: amarelo;
}
Opacidade / Transparente
A propriedade de opacidade especifica a opacidade/transparente do elemento. O intervalo de valores é de 0.0 a 1.0. Quanto menor o valor, mais transparente:
Exemplo
div {
background-color: verde;
opacidade: 0.3;
}
Atenção:Usar opacidade Quando a propriedade de opacidade de um elemento é aplicada, todos os seus elementos filhos herdam a mesma opacidade. Isso pode tornar a leitura do texto dentro de elementos completamente transparentes difícil.
Usar opacidade RGBA
Se você não deseja aplicar opacidade aos elementos filhos, por exemplo, no exemplo acima, use RGBA Valor de cor. Abaixo está um exemplo de configuração da cor de fundo em vez da opacidade do texto:
Você pode encontrar mais informações em Cores do CSS Você aprendeu no capítulo que pode usar RGB como valor de cor. Além do RGB, você pode usar valores de cor RGB com alpha Os canais são usados juntos (RGBA) - o canal especifica a opacidade da cor.
O valor de cor RGBA especificado é: rgba(vermelho, verde, azul, alpha)。alpha Os parâmetros são números entre 0.0 (completamente transparente) e 1.0 (completamente opaco).
Dica:Você pode encontrar mais informações sobre cores RGBA em nosso Cores do CSS Você aprendeu mais sobre cores RGBA neste capítulo.
Exemplo
div {
background: rgba(0, 128, 0, 0.3) /* fundo verde com 30% de opacidade */
}
- Página anterior Cores HSL do CSS
- Próxima página Imagem de Fundo do CSS
