1.1 Propriedade background-color
A propriedade background-color define a cor de fundo para um elemento. Ela permite configurar a cor de preenchimento do fundo,
garantindo uma separação visual do conteúdo e melhorando a percepção do texto e outros elementos.
Valores:
- Nomes de cores: você pode usar nomes de cores predefinidos, como
red,blue,green - Valores hexadecimais: por exemplo,
#ff0000,#00ff00,#0000ff - RGB: por exemplo,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: por exemplo,
rgba(255, 0, 0, 0.5)(vermelho semitransparente) - HSL: por exemplo,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: por exemplo,
hsla(0, 100%, 50%, 0.5)(vermelho semitransparente).
Exemplo de uso:
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<body>
<div class="color-red">Este elemento tem fundo vermelho.</div>
<div class="color-hex">Este elemento tem fundo com cor definida em formato hexadecimal.</div>
<div class="color-rgba">Este elemento tem fundo verde semitransparente.</div>
</body>
Explicação do código:
background-color: red;: define o fundo vermelho para o elementobackground-color: #3498db;: define a cor do fundo usando um valor hexadecimalbackground-color: rgba(46, 204, 113, 0.7);: define um fundo verde semitransparente usando RGBA
1.2 Propriedade background-image
A propriedade background-image define uma imagem de fundo para um elemento. Ela permite usar imagens para
criar fundos visualmente atraentes, melhorando o design e a percepção da página web.
Como valor, é necessário passar a URL da imagem - indicar o caminho da imagem que será usada
como fundo. Por exemplo, url('image.jpg').
Exemplo de uso:
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<body>
<div class="background-url">Este elemento tem uma imagem de fundo.</div>
</body>
Explicação do código:
background-image: url('https://via.placeholder.com/150');: define uma imagem como fundo para o elemento. Neste caso, é usada a URL da imagem
Vantagens de usar background-image:
- Atração visual: o uso de imagens de fundo permite criar páginas web mais visivelmente atraentes e interessantes.
- Contexto: imagens de fundo podem fornecer contexto ou informação adicional, melhorando a percepção visual do conteúdo da página.
- Branding: imagens de fundo podem ser parte do branding, ajudando a manter um estilo uniforme e a identidade do site.
Dicas para usar imagens de fundo:
- Otimização de imagens: para melhorar o desempenho da página é importante otimizar as imagens, reduzindo seu tamanho sem perda significativa de qualidade
- Suporte em diferentes navegadores: certifique-se de que as imagens usadas são exibidas corretamente em todos os navegadores alvo
- Texto alternativo: para imagens que têm importância significativa, deve-se prever maneiras alternativas de transmitir informação, como descrições de texto, para usuários com necessidades especiais
1.3 Uso conjunto de background-color e background-image
As propriedades background-color e background-image podem ser usadas juntas para criar fundos complexos e atraentes.
Por exemplo, você pode definir uma cor de fundo que será visível caso a imagem de fundo não carregue, ou
usar um fundo colorido em combinação com uma imagem semitransparente.
Exemplo de uso:
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
<body>
<div class="combined-background">
Este elemento tem um fundo combinado com imagem e cor de fundo.
</div>
</body>
Explicação do código:
background-color: #3498db;: define a cor de fundobackground-image: url('https://via.placeholder.com/150');: define a imagem de fundowidth: 300px;height: 300px;: define as dimensões do elementocolor: white;: define a cor do texto para melhor legibilidade no fundodisplay: flex;align-items: center;justify-content: center;text-align: center;: centraliza o texto dentro do elementoborder: 1px solid #000;: adiciona uma borda ao redor do elemento para realce visual
GO TO FULL VERSION