“Tutorial de cores de plano de fundo HTML – Como alterar uma cor de plano de fundo Div, explicada com exemplos de código”

Alterando a cor de fundo de uma div

Neste exemplo, alteraremos as cores de plano de fundo das seguintes divs.

 I love HTML 
 I love CSS 
 I love JavaScript 

Sem nenhum estilo, isso será traduzido visualmente para o seguinte.

Eu amo HTML

Eu amo CSS

Eu amo JavaScript

Vamos mudar a cor de fundo das divs adicionando estilos às classes. Você pode seguir tentando os exemplos em um arquivo HTML.

    
 I love HTML 
    
 I love CSS 
    
 I love JavaScript 

Isso resultará no seguinte:

Eu amo HTML

Eu amo CSS

Eu amo JavaScript

Legal! Alteramos com sucesso a cor de plano de fundo desta div. Em seguida, vamos conhecer mais sobre essa propriedade. Vamos ver como a propriedade background-color afeta partes do modelo da caixa CSS.

Cor do plano de fundo e o modelo da caixa CSS

De acordo com o modelo de caixa CSS, todos os elementos HTML podem ser modelados como caixas retangulares. Cada caixa é composta por 4 partes, como mostrado no diagrama abaixo.

Você pode ler o modelo da caixa e não o conhecer. A questão é: qual parte do modelo de caixa é afetada quando você altera a cor de fundo de uma div? A resposta simples é a área de preenchimento e a área de conteúdo. Vamos confirmar isso usando um exemplo.

    
        
This is the parent div which contains the div we are testing
        
            
This example shows that changing the background color of a div does not affect the border and margin of the div.





        
    

Isso resultará em:

No exemplo acima, podemos ver que a área da margem e a área da borda não são afetadas pela alteração na cor do plano de fundo. Podemos alterar a cor da borda usando a propriedade border-color. A área da margem permanece transparente e reflete a cor de fundo do contêiner pai.

Nota: Se você está se perguntando por que a margem inferior não é aplicada, é devido a um comportamento CSS chamado margem em colapso.

Por fim, vamos discutir os valores que a propriedade background-color pode assumir.

Valores de cor de fundo

Assim como a propriedade color, a propriedade background-color pode assumir seis valores diferentes. Vamos considerar os três valores mais comuns com um exemplo. No exemplo, definimos a cor de fundo da div para vermelho com valores diferentes.

    
        
The background property can take six different values.
    
    
        
The background property can take six different values.
    
    
        
The background property can take six different values.





    

Observe que todos resultam com a mesma cor de fundo.

Outros valores os background-color A propriedade pode incluir valor HSL, valores especiais de palavras-chave e valores globais. Aqui estão exemplos de cada um deles.

/* HSL value */background-color: hsl(0, 100%, 25%;/* Special keyword values */background-color: currentcolor;background-color: transparent;/* Global values */background-color: inherit;background-color: initial;background-color: unset;

Você pode ler mais sobre cada um desses valores aqui.

Ao definir a cor do plano de fundo de um elemento, é importante garantir que a taxa de contraste da cor do plano de fundo e da cor do texto que ele contém seja alta o suficiente. Isso é para garantir que pessoas com baixa visão possam ler facilmente o texto.

Considere estes dois divs.