Uma técnica de sobreposição no CSS é uma maneira de transpor texto sobre imagens. O CSS “imagem de fundo”E CSS“fundo”As propriedades são usadas para alcançar esse efeito de sobreposição. O objetivo deste artigo é explorar como usar o CSS para definir uma imagem de sobreposição com a cor.

Os resultados deste artigo são:

• • O que é propriedade de imagem-fundo no CSS?
  • O que é propriedade de fundo no CSS?
  • Como definir a imagem de sobreposição com a cor?

Comecemos!

Propriedade de Background-Imagem

Para adicionar uma imagem como fundo de qualquer elementos html, o “imagem de fundo”A propriedade pode ser utilizada.

Sintaxe

A sintaxe da propriedade de imagem-fundo é:

Imagem de fundo: Image URL ();

Especifique o nome da imagem ou seu caminho completo no URL ().

O que é propriedade de fundo no CSS?

É uma propriedade abreviada usada para atribuir valores diferentes à imagem, como cor, tamanho, posição e assim por diante.

Sintaxe

A sintaxe da propriedade em segundo plano é:

Antecedentes: Cor | Posição | tamanho ;

• • cor: É usado para atribuir a cor de fundo.
  • posição: É usado para definir a posição de fundo.
  • tamanho: É usado para especificar o tamanho do fundo.

Aqui está um exemplo para explicar o ponto.

Exemplo: como definir a imagem de sobreposição com a cor?

Neste exemplo primeiro, criaremos uma div, chamada “sobreposição”E dentro da div, adicionamos uma entrega com

marcação:

Sobreposição de imagem

Agora, adicionaremos uma imagem de fundo com a ajuda do CSS. Como "url ()”, Demos o caminho da imagem e atribuímos a largura“350px, altura "250px”E posição“absoluto”Da imagem:

.imagem
Antecedentes: URL ("Imagem.jpg ") sem repetição;
Largura: 350px;
Altura: 250px;
Posição: Absoluto;

Isso dará a seguinte saída:

Agora, vamos dar um passo adiante para aplicar o efeito de sobreposição:

.sobreposição
Antecedentes: RGBA (233, 140, 0, 0.7);
Margin-top: 10px;
margem-esquerda: 55px;
Largura: 200px;
Size da fonte: 25px;
Cor: RGB (252, 80, 0);
Posição: Absoluto;

Aqui, utilizamos diferentes propriedades do CSS para atender a diferentes funcionalidades:

• • fundo: Atribuímos uma cor de sobreposição usando a propriedade de fundo.
  • margem: Para especificar a posição da sobreposição, use a propriedade de margem.
  • largura: Este parâmetro especifica o tamanho da sobreposição exibida sobre a imagem de fundo.
  • tamanho da fonte: Especifica o tamanho da fonte.
  • cor: Define a cor do texto.
  • posição: Define onde o texto aparecerá.

Após a implementação dos pontos acima mencionados, salve o código do arquivo HTML e CSS e verifique o resultado:

Oferecemos o método para definir uma imagem de sobreposição com cores no CSS.

Conclusão

O efeito de sobreposição pode ser alcançado usando CSS “imagem de fundo”E CSS“fundo”Propriedades. Isso pode ser feito atribuindo uma imagem à propriedade de imagem de fundo e definindo a cor na propriedade em segundo plano. Além disso, é uma técnica de combinar mais de um elemento em um único contêiner. Este post demonstrou como definir imagens de sobreposição com cores em CSS usando exemplos.