Como usar a transição de CSS para o fundo do desbotamento da opacidade

CSS fornece muitas propriedades benéficas para elementos HTML. Essas propriedades ajudam os usuários a ajustar os elementos HTML, como tamanho, cor, opacidade, transição e muito mais. Mais especificamente, o “transição”Propriedade permite que os desenvolvedores defina o nível de transparência e adicionam efeitos aos elementos HTML. Esta função em particular pode tornar a página da web mais divertida e envolvente.

Esta posta.

Como usar a transição de CSS para o fundo do desbotamento da opacidade?

O CSS “transição”A propriedade é utilizada para alterar os valores da propriedade dentro de uma duração especificada gradualmente. Considerando que o CSS “opacidade”A propriedade ajusta o nível de transparência dos elementos.

Para usar a transição do CSS para o fundo da opacidade, siga as etapas fornecidas.

Etapa 1: Crie um cartão em HTML

Em primeiro lugar:

• Adicione um “”Elemento e atribui uma classe“cartão”.
• Então, inclua o “

  ”Tag para definir um título e o“

  ”Elemento para especificar o conteúdo do texto.

• Depois disso, adicione um “”Tag para a imagem. O "src”O atributo especifica o URL da imagem e o“aula”O atributo é definido como“Fade-IMG”Para acessar a imagem no CSS para estilo.

Html

Senhor. John

Autor técnico

Etapa 2: estilize o cartão

O ".cartão”A classe é estilizada com as propriedades listadas abaixo:

.Cartão
Largura: 300px;
Altura: 300px;
borda: 1px RGB sólido (232, 229, 232);
margem: automático;
preenchimento: 15px;
Radio de fronteira: 10px;
Posição: relativa;

Aqui:

• ““largura”Determina a amplitude do elemento.
• ““altura”Determina a altura do elemento.
• ““fronteira”Adiciona uma borda ao redor do elemento.
• ““margem”Gera espaço ao redor do elemento.
• ““preenchimento”Produz espaço dentro da fronteira do elemento.
• ““Radio de fronteira”Roups as bordas do elemento.
• ““posição”A propriedade está definida como“relativo”, Que é utilizado para definir o elemento em relação à sua posição original.

Saída

Etapa 3: ajuste a imagem

O ".Fade-IMG”A classe é utilizada no CSS para estilizar a imagem. O tamanho da imagem e a opacidade serão ajustados nesta classe:

.Fade-IMG
Posição: Absoluto;
Esquerda: 0;
topo: 0;
Altura: 100%;
largura: 100%;
Objeto-ajuste: capa;
Opacidade: 0.2;
Transição: Opacity .25s facilidade-in-out;
Cursor: Ponteiro;

As seguintes propriedades descritas são adicionadas ao “Fade-IMG" aula:

• ““posição"Com o valor"absoluto”Define a posição do elemento correspondente ao seu elemento quase posicionado.
• O "principal" e "esquerda”São as propriedades de deslocamento que ajustam o elemento da parte superior, esquerda, direita e inferior.
• O "largura" e "altura”As propriedades são usadas para especificar a área do elemento.
• ““Objeto-ajuste”Propriedade com o valor“cobrir”Faz a imagem preencher o recipiente.
• ““opacidade”O valor designa o nível de transparência.
• ““transição”Propriedade com o valor“opacidade .25S facilidade-in”Define a propriedade Opacity que gradualmente se muda na duração de“25s”.
• ““cursor”Propriedade define o estilo do cursor.

Etapa 4: adicione a opacidade no mouse

O ".Fade-IMG: Passe o mouse”É utilizado para aplicar o estilo à imagem quando o dispositivo apontador paira nela. Além disso, ":flutuar”É uma pseudo-classe CSS que é utilizada para adicionar estilos no Hover:

.Fade-IMG: Hover
Opacidade: 0.9;

Aqui, o nível de opacidade é ajustado para “0.9”.

Saída

Pode -se observar que aplicamos com sucesso a propriedade de transição CSS para desaparecer o fundo.

Conclusão

Para adicionar uma transição para o fundo do desbotamento da opacidade, primeiro, defina o “" área. Em seguida, ajuste seu tamanho e opacidade usando o CSS “largura","altura", e "opacidade”Propriedades. Em seguida, forneça o “transição”Propriedade para ele, que determinará como os valores da propriedade mudam gradualmente em uma duração especificada. Então o "opacidade”É novamente definido no mouse pairando usando o“:flutuar”Pseudo-classe. Esta posta.