Planos de fundo CSS
As propriedades de plano de fundo CSS são usadas para adicionar efeitos de plano de fundo para elementos.
Nestes capítulos, você aprenderá sobre as seguintes propriedades de background do CSS:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(propriedade abreviada)
cor de fundo CSS
A background-colorpropriedade especifica a cor de fundo de um elemento.
Exemplo
A cor de fundo de uma página é definida assim:
body {
background-color: lightblue;
}
Com CSS, uma cor é mais frequentemente especificada por:
- um nome de cor válido - como "vermelho"
- um valor HEX - como "#ff0000"
- um valor RGB - como "rgb(255,0,0)"
Consulte CSS Color Values para obter uma lista completa de valores de cores 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: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Opacidade / Transparência
A opacitypropriedade especifica a opacidade/transparência de um elemento. Pode assumir um valor de 0,0 - 1,0. Quanto menor o valor, mais transparente:
opacidade 1
opacidade 0,6
opacidade 0,3
opacidade 0,1
Exemplo
div {
background-color: green;
opacity: 0.3;
}
Nota: Ao usar a opacitypropriedade para adicionar transparência ao plano de fundo de um elemento, todos os seus elementos filhos herdam a mesma transparência. Isso pode dificultar a leitura do texto dentro de um elemento totalmente transparente.
Transparência usando RGBA
Se você não deseja aplicar opacidade a elementos filho, como no exemplo acima, use valores de cor RGBA . O exemplo a seguir define a opacidade da cor de fundo e não do texto:
100% de opacidade
60% de opacidade
30% de opacidade
10% de opacidade
Você aprendeu em nosso capítulo CSS Colors que você pode usar RGB como um valor de cor. Além de RGB, você pode usar um valor de cor RGB com um canal alfa (RGB A ) - que especifica a opacidade de uma cor.
Um valor de cor RGBA é especificado com: rgba(red, green, blue, alpha ). O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
Dica: Você aprenderá mais sobre Cores RGBA em nosso Capítulo Cores CSS .
Exemplo
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}