Como definir a opacidade de fundo em CSS

A configuração de fundo em aplicativos da Web é uma operação comum que atrai os olhos do usuário. No entanto, às vezes pode levar a uma grande distração. Para evitar essa situação, os desenvolvedores da Web tornam seus antecedentes transparentes aplicando opacidade ou usando propriedades alternativas de opacidade CSS.

Neste guia, abordaremos como definir a opacidade de fundo no CSS.

Como definir a opacidade de fundo em CSS?

No CSS, a opacidade de fundo se refere aos seguintes termos:

• • Opacidade da imagem de fundo
  • Opacidade da cor de fundo

Agora vamos explicar ambos individualmente!

Como definir a opacidade da imagem de fundo em CSS?

O "opacidade”A propriedade pode ser utilizada para tornar as imagens transparentes em segundo plano ou em qualquer lugar da página da web. Textos e cores de fundo também podem ser transparentes com o uso desta propriedade.

Confira o exemplo detalhado fornecido para saber mais sobre definir a opacidade da imagem de fundo em CSS.

Exemplo

Atualmente, temos uma imagem definida no fundo do nosso contêiner:

Em nosso arquivo html, adicionamos uma tag com o “meu-img”ID na seção corporal:

Para definir a opacidade da imagem de fundo, temos que estilizar nosso elemento de imagem. Para fazer isso, use o “#"Antes de ID chamado"meu-img" como "#my-img”Para estilizar. Como a imagem será usada no fundo do recipiente selecionado, dê algum espaço ao contêiner usando “preenchimento" de "15%”. Na próxima etapa, defina a imagem como um fundo, utilizando o “fundo" propriedade; especifique o "sem repetir”Valor junto“url ()”Valor para evitar a repetição da imagem. Por fim, defina a opacidade como valor “0.2”Ou de acordo com suas preferências:

Agora, salve o código e abra o arquivo html no navegador. No nosso caso, vamos abri -lo com a ajuda do “Servidor vivo”:

Aqui, a opacidade em nossa imagem foi aplicada com sucesso:

Vamos para a próxima seção!

Como definir a opacidade da cor de fundo em CSS?

Sempre há chances de você encontrar cores sólidas ou gradientes no fundo do site. Para a opacidade das cores de fundo, utilizaremos oe ““cor de fundo" propriedade. Esta propriedade ajuda a configurar a cor do fundo; No entanto, também pode ser utilizado para definir a opacidade das cores de fundo ou torná -las transparentes.

Veja o exemplo abaixo para o uso da propriedade declarada.

Exemplo 1: Usando a propriedade cor de fundo para definir uma opacidade de imagem

Neste exemplo, a cor de fundo da nossa página da web é laranja e temos que definir sua opacidade:

Para fazer isso, usaremos o código de cores hexadecimal com o “cor de fundo" propriedade. Usando uma cor hexadecimal específica, aplicaremos a opacidade à cor do fundo:

Observação: Alterando a "#00000020”Valor para“#00000000”Tornará sua formação completamente transparente.

Salve o código pressionando “Ctrl + s”E abra -o com o servidor ao vivo:

Saída

Agora, vamos dar mais um exemplo interessante de definir opacidade de cor de fundo no CSS.

Exemplo 2: Usando a propriedade cor de fundo para tornar uma imagem transparente

Neste exemplo, usaremos o “fundo”Propriedade e defina seu valor como“transparente”. Como resultado, o plano de fundo será transparente, mas ainda parte do contêiner:

Aqui podemos ver o fundo totalmente transparente:

Para a verificação, inspecione os elementos adicionados no recipiente:

Nós entregamos as maneiras mais simples de definir a opacidade de fundo.

Conclusão

Para definir a opacidade de fundo, utilize o “opacidade","cor de fundo", ou "fundo" propriedade. A opacidade fornece controle sobre a definição da opacidade de fundo. A propriedade cor de fundo pode ajudar a aplicar a transparência dos antecedentes via código de cores hexadecimal, enquanto a propriedade em segundo plano é direta; Definê -lo para transparente fará com que o fundo desapareça. Neste artigo, demonstramos como definir a opacidade de fundo no CSS.