Opacidade da imagem de fundo do CSS sem afetar o texto
Exemplo 1
Para alterar a opacidade da imagem em segundo plano sem afetar o texto, devemos escrever algum código HTML e alterar a opacidade no código CSS. Estamos usando o código do Visual Studio para fazer esses exemplos. Então, abrimos o novo arquivo neste software e selecionamos o idioma "html", e um arquivo html é criado. Então, começamos a codificar neste arquivo. Depois de concluir nosso código, salvamos -o e o ““.Extensão de arquivo html ”gera automaticamente este nome de arquivo.
Criamos uma classe “div” “Demo-Wrap” usando uma tag de imagem. A classe de imagem que usamos é "img-bg". Agora, temos que definir a imagem em segundo plano, por isso usamos "Background-IMG SRC" e colocar o nome da imagem que queremos exibir como a imagem de fundo. Aqui, definimos o “cenário.Imagem JPG ”como a imagem de fundo. Também temos outra “div” dentro da primeira div, e o nome desta div é “texto”. E, na segunda div, temos um título "H1" e o título A neste "div". Em seguida, feche as duas tags "div".
Código CSS
No código CSS fornecido, estamos mudando a opacidade da imagem de fundo, mas o título de texto que escrevemos nesta imagem permanece o mesmo. A opacidade da imagem de fundo não muda a opacidade do texto.
Usamos "img-bg", que é o nome da classe de imagem, e definimos a opacidade da imagem como "0.4 ”. Estamos definindo a imagem de plano de fundo "Posição" para "Absoluto". Os "esquerda" e "top" estão definidos como "0". A "largura" que definimos aqui é "100%" para a imagem de fundo, e "altura" é "automático". Em seguida, projetamos nosso texto enquanto o alinhamos no "centro" e definimos sua "família de fontes" para "argelino". Estamos usando "preto" como a cor da fonte.
Saída
Você pode ver que a imagem no fundo não está em sua cor original porque usamos “0.Opacidade de 4 ”nesta imagem de fundo. No entanto, não há efeito no texto escrito na imagem. Dessa maneira, podemos mudar a opacidade da imagem sem afetar o texto.
Exemplo # 2
Ao alterar o código HTML anterior, criamos outro exemplo. Mas desta vez, adicionamos a imagem usando propriedades CSS.
Este arquivo define dois títulos na classe "div". Temos "H1" e "H2" na classe Div chamada "Hero" neste código. Adicionaremos a imagem de fundo no código CSS, dado abaixo.
Código CSS
A posição da classe div "Hero" é "relativa", sua altura é "90VH" e sua largura é "90%". A tela para esta classe Div "Hero" é "Flex", Item no "centro" e "Justify-Content" para o "centro". O ":: antes" é o "pseudo-seletor" usado para colocar a imagem de fundo antes do elemento selecionado. Colocamos "conteúdo", definimos a "imagem de fundo" usando o "URL" e colocamos o nome da imagem neste URL. O "tamanho de fundo" define a imagem do plano de fundo para "cobrir", e sua "posição" é "absoluta". Então o "topo", "inferior", "esquerda" e "direita" são todos "0px". Aqui, mudamos a "opacidade" para "0.4 ”. Agora, aplicamos o estilo aos títulos. A "posição" de título que definimos é "relativa". A cor do cabeçalho é "vermelha". O tamanho deste título é "25px" e a "altura da linha" é "0.9 ”. Alinhamos este indo para o "centro". A cor do segundo cabeçalho é "preta".
Saída
Aqui, a imagem de fundo não aparece em sua cor original, pois definimos a opacidade da imagem no código CSS. Mas o texto na imagem aparece na cor original.
Exemplo # 3
Criamos outro arquivo html. Neste código, criamos três parágrafos dentro da classe DIV, e a classe Div que criamos se chama "ImageOpc".
Código CSS
Vamos inserir a imagem de fundo no código CSS. Então, usamos o pseudo-seletor "antes", que desuso no exemplo anterior. Aqui, o código é o mesmo que no segundo exemplo, mas alteramos a imagem de fundo e usamos a propriedade de "opacidade" em uma imagem diferente. Aqui, "Esquerda", "Right", "Bottom" e "Top" estão todos definidos como "0". E “0.4 ”da opacidade é usada para esta imagem. Definimos o parágrafo na posição "relativa". E defina sua altura igual a “0.9px ”. Também mudamos o "tamanho da fonte" do parágrafo e o definimos como "25px". A fonte "argeliana" é usada para o parágrafo. E definimos seu top "200px".
Saída
Você pode ver que a imagem de fundo mostra alguma transparência. Aqui, usamos 40% de opacidade nesta imagem de fundo, mas você pode notar que ela não afeta o texto escrito na imagem de fundo.
Exemplo # 4
Estamos fazendo pequenas alterações no código HTML anterior. Neste exemplo, usamos quatro parágrafos dentro dos nomes "div" e "giveGivingageOPC" para esta classe div.
Código CSS
Este código CSS é o mesmo que o código anterior. No entanto, mudamos o "URL" da imagem de fundo. Usamos o “cenário de fundo.Imagem JPG ”aqui. Lembre -se de que você está usando a extensão de imagem correta com o nome da imagem. Você deve colocar o caminho correto da imagem neste "url". Usamos o “0.Valor de 5 ”para a opacidade da imagem de fundo nesta instância. O "tamanho da fonte" que usamos é "30px" neste exemplo para o parágrafo. Definimos a família de fontes do parágrafo para "Times New Roman" e, além disso, é "200px". O parágrafo aparece em "Maroon" e é "mais ousado" em "peso da fonte".
Saída
Esta imagem de fundo mostra 50% de opacidade à medida que definimos seu valor como “0.5 ”, mas o texto permanece o mesmo. Este valor de opacidade não se aplica ao texto.
Conclusão
Apresentamos este guia em que mudamos a opacidade da imagem de fundo sem afetar o texto. Assim, você pode determinar como alterar a opacidade da imagem em segundo plano no CSS sem afetar o texto. Explicamos e mostramos exemplos diferentes nos quais usamos a propriedade de "opacidade" para alterar a opacidade da imagem de fundo, mas o texto permanece o mesmo. Depois de aprender este guia, você pode inserir as imagens de fundo em seus projetos e definir a opacidade da imagem em segundo plano sem afetar o texto usando a propriedade CSS.