No desenvolvimento da web, muitas vezes você pode sentir a necessidade de adicionar fundos transparentes. Pesquisando a propriedade transparente de fundo no CSS não fornecerá nenhum resultado, pois não existe uma propriedade de background transparente. No entanto, você pode usar propriedades alternativas ou o código de cores transparente para o mesmo objetivo.

Neste blog, aprenderemos sobre a definição da cor de fundo transparente no CSS.

Como definir a cor de fundo transparente em CSS?

Para definir a cor de fundo transparente, usaremos os seguintes métodos:

• propriedade cor de fundo
• Propriedade da Opacidade

Vamos passar por cada método um por um!

Método 1: Usando a cor de fundo para definir a cor de fundo transparente em CSS

No CSS, o “cor de fundo”A propriedade é usada para atribuir uma cor diferente ao fundo. Além disso, o uso da propriedade cor de fundo de uma maneira específica também pode definir a transparência de diferentes elementos.

Exemplo

Aqui está a nossa página HTML com dois fundos, um como uma imagem e o outro como fundo do contêiner. Queremos tornar transparentes de fundo do contêiner para que possamos ver através da imagem adicionada devido à transparência do contêiner:

Em nosso arquivo html, adicionamos um “

”Tag com uma classe chamada“bg”Dentro de um elemento div e o colocou dentro do“" marcação:

Transparente

No arquivo CSS, use o “." antes "bg”Para declarar isso como uma classe. Em seguida, adicione a propriedade cor de fundo junto com o valor RGBA, atribua o “100px”Enchendo e defina a cor do texto como“branco”. Como o esquema de cores RGBA tem seu formato adequado, definiremos todos os seus valores como zero, exceto o último. Defina o último valor como “.25”Para obter uma sombra de transparência. No entanto, pode ser substituído por “0”Para ter uma tonalidade clara de transparência.

Na próxima etapa, atribua a div e preenchimento “200px”E defina o URL da imagem de fundo desejada:

Observação: Não removemos a cor de fundo anteriormente definida como “Aqua”. Como resultado, o fundo transparente do contêiner será claramente visível usando o esquema de cores RGBA.

Como você pode ver, definimos com sucesso a cor de fundo transparente usando propriedade de fundo de fundo.

Agora, vamos conferir o método de usar outra propriedade CSS para definir uma cor de fundo transparente.

Método 2: Usando a propriedade Opacity para definir a cor de fundo transparente em CSS

No CSS, o “opacidade”A propriedade é usada para tornar os elementos transparentes. No entanto, sempre existem níveis de transparência que podem ser especificados, como 1 - 100 (%). Por exemplo, um elemento com “0Apacidade será completamente transparente.

Exemplo 1

Neste exemplo, atribuiremos o “0.2”Valor da opacidade para o“.bg" aula. Todas as outras propriedades permanecerão as mesmas:

Aqui, definimos com sucesso o fundo transparente:

No entanto, definir a opacidade também aplicou o efeito de transparência ao texto adicionado. Para abordar esse cenário, vamos dar outro exemplo.

Exemplo 2

Quando você atribui um valor de opacidade, ele é aplicado a todos os elementos dentro do contêiner especificado com a mesma classe. No entanto, mudar a classe do texto adicionado pode resolver o problema declarado.

Para fazer isso, atribuiremos a classe “texto" para

Tag e classe “bg”Para a tag:

Transparente

Agora o "Transparente”O texto pertence a uma classe diferente“.texto”. Então, vamos especificar seu “posição”E dê o valor“absoluto", Atribua o"margin-top”Valor da propriedade como“-9%" e "margem-esquerda”Valor como“50px”Para obter o texto na caixa:

.texto
Posição: Absoluto;
margin -top: -9%;
margem-esquerda: 50px;
cor branca;

Pode -se observar que agora a opacidade é aplicada apenas ao recipiente para torná -lo transparente sem alterar o texto adicionado:

Nós fornecemos as maneiras mais fáceis de definir a cor de fundo transparente em CSS.

Conclusão

Para definir a cor de fundo transparente no CSS, você pode usar o “cor de fundo”Propriedade com o valor RGBA e o“opacidade" propriedade. A propriedade cor de fundo pode ser usada duas vezes, uma para definir o plano de fundo original e o segundo para tornar o primeiro transparente usando o esquema de cores RGBA. No entanto, o valor da propriedade da opacidade é aplicado a todos os elementos da classe específica para os quais é definido. Neste artigo, abordamos dois métodos eficientes para definir a cor de fundo transparente no CSS.