Como o próprio nome afirma o cor de fundo A propriedade determina o cor de fundo de qualquer elemento. Pode ser usado para mudar o cor de fundo de um único elemento, vários elementos, página inteira ou documento inteiro.

No CSS, vários valores podem ser atribuídos ao cor de fundo Propriedade listada abaixo:

• Um nome de cor eu.e. vermelho, amarelo, verde, etc.,
• Os valores de cores hexadecimais i.e. #FF0000, 00FF00, etc.
• O valor RGB como RGB (255, 0, 0), etc.
• Os valores de HSL como (55, 45, 55), etc.

Este artigo apresentará uma visão geral da propriedade cor de fundo. Ele discutirá como atribuir valores diferentes à propriedade cor de fundo.

Como definir a cor de fundo usando nomes de cores

No CSS, podemos definir a cor de fundo usando nomes de cores como vermelho, verde, azul, etc.

Exemplo 1: O exemplo abaixo do ritmo definirá a cor de plano de fundo para toda a página usando o "valor do nome de cores":

Bem -vindo ao Linuxhint.com

Amostra parágrafo

O trecho acima especifica a cor de fundo usando CSS interno. Ele exibirá a seguinte saída:

Como definir a cor de fundo usando o código de cores hexadecimal

No CSS, a cor de fundo pode ser atribuída usando valores de cores hexadecimais. O valor de cor hexadecimal consiste em um "#" símbolo seguido de código de três ou seis dígitos.

Exemplo 2: O snippet abaixo do público utiliza o código de cores hexadecimal para estilizar a cor de fundo das tags de parágrafos usando estilo interno e cor de fundo de

Usando CSS embutido:

cor de fundo usando código de cores hexadecimal

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

Como resultado, produz a seguinte saída:

Como definir a cor de fundo usando o código de cores RGB

Os códigos de cores RGB podem ser usados ​​para definir a cor de fundo de um elemento. O código de cores RGB determina a cor usando valores numéricos varia de 0 a 255. A cor RGB utiliza três cores principais i.e. (vermelho, verde e azul) para gerar diferentes combinações de cores.

Exemplo 3: O exemplo a seguir criará um arquivo CSS externo para definir a cor de fundo de vários elementos. Utiliza os códigos de cores RGB para aplicar a cor de fundo.

Arquivo CSS:

corpo
cor de fundo: RGB (212, 212, 212);

H1
Background-Color: RGB (0, 144, 158);

P
cor de fundo: RGB (137, 210, 236);

Arquivo HTML:

cor de fundo usando o código de cores RGB

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

O código acima gerará o seguinte resultado:

Como definir a cor de fundo usando o código de cores RGBA

Um parâmetro adicional alfa (a) pode ser adicionado ao código de cores RGB que determina a opacidade de uma cor. O valor do parâmetro alfa está entre 0.0 a 1.0.

Exemplo 4: O código abaixo dado estendeu um pouco o exemplo anterior e adicionou o valor ao parâmetro alfa também:

Arquivo CSS:

corpo
Background-Color: RGBA (212, 212, 212, 0.1);

H1
Background-Color: RGBA (0, 144, 158, 0.1);

P
Background-Color: RGBA (137, 210, 236, 0.1);

Arquivo HTML:

cor de fundo usando o código de cores RGB

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

A única mudança no exemplo anterior (RGB) e este (RGBA) é o parâmetro alfa. Compare as duas saídas, você notará uma diferença clara:

É assim que o parâmetro alfa funcionou.

Como definir a cor de fundo usando o código de cores HSL

CSS suporta outra convenção colorida chamada HSL. HSL define uma cor em relação à matiz, saturação e leveza.

Exemplo 5: Considere o seguinte código que especifica como a Convenção HSL funciona:

cor de fundo usando o código de cores HSL

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

O código acima implementou a cor de segundo plano em

e

Elemento usando a Convenção de Color HSL. Ele exibirá a seguinte saída:

Como definir a cor de fundo usando o código de cores HSLA

O parâmetro alfa pode ser utilizado com a convenção de cores HSL para especificar a opacidade de uma cor.

Exemplo 6: Vamos estender um pouco mais o código acima e adicionar o parâmetro alfa no HSL:

cor de fundo usando o código de cores HSLA

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

A saída provará que o parâmetro alfa adicionou a opacidade à cor de fundo, como mostrado abaixo:

Conclusão

O CSS utilizou uma propriedade em segundo plano para implementar a cor de fundo em um elemento, página, etc. A cor de fundo pode ser atribuída usando várias maneiras, como especificando o nome da cor, valor hexadecimal, valor RGB, etc.

Este artigo considerou as múltiplas convenções de cores para a propriedade cor de fundo. Ele fornece um guia detalhado sobre como aplicar a cor de plano de fundo usando "nome colorido", "valores hexadecimais", "RGB, RGBA Color Codes" e "HSL, HSLA Color Codes".