Planos de fundo CSS

Índice

Mostrar índice

As propriedades de fundo CSS são usadas para adicionar efeitos de fundo para elementos.

Nestes capítulos, você aprenderá sobre as seguintes propriedades de plano de fundo CSS:

style="color:crimson">cor de fundo
style="color:crimson">imagem de fundo
style="color:crimson">repetição de fundo
style="color:crimson">anexo de fundo
style="color:crimson">posição de fundo
style="color:crimson">background (propriedade abreviada)

Cor de fundo CSS

A propriedade background-color especifica a cor de fundo de um elemento.

Exemplo

A cor de fundo de uma página é definida assim:

body {
  background-color: lightblue;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

Com CSS, uma cor é geralmente especificada por:

um nome de cor válido - como "vermelho"
um valor HEX - como "#ff0000"
um valor RGB - como "rgb(255,0,0)"

Veja os valores de cores CSS para obter uma visão completa lista de possíveis valores de cores.

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;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Opacidade/Transparência

A propriedade opacity especifica a opacidade/transparência de um elemento. Pode assumir um valor de 0,0 a 1,0. Quanto menor o valor, mais transparente:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Exemplo

div {
  background-color: green;
  opacity: 0.3;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>

Observação: ao usar a propriedade opacity para adicionar transparência ao plano de fundo de um elemento, todos os seus elementos filhos herdar 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 quiser aplicar opacidade aos elementos filhos, como no exemplo acima, use valores de cores RGBA. O exemplo a seguir define a opacidade da cor de fundo e não do texto:

100% opacity

60% opacity

30% opacity

10% opacity

Você aprendeu em nosso capítulo Cores CSS que pode usar RGB como valor de cor. Além do RGB, você pode usar um valor de cor RGB com um canal alfa (RGBA) - que especifica a opacidade de uma cor.

Um valor de cor RGBA é especificado com: rgba(red, green, blue, alpha). O 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 */
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

A propriedade de cor de fundo CSS

background-color: Define a cor de fundo de um elemento