Como evitar a herança da opacidade em CSS

Escrito por max power | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como evitar a herança da opacidade em CSS
A propriedade "opacity" em CSS permite aos designers aplicar efeitos especiais a sites web (Hemera Technologies/AbleStock.com/Getty Images)

Os web designers usam o CSS para estabelecer a opacidade de um elemento de um site. A propriedade "opacity" (opacidade) permite ao designer criar um efeito tipo cristal que permite ao usuário ver o fundo de um site. Um problema com ela é que os valores da propriedade são herdados por elementos secundários automaticamente. Você pode evitar esse problema aplicando configurações de opacidade ao valor RGBA da propriedade "background" do CSS, que não é herdada.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Escreva uma regra em CSS para um novo elemento principal. O seguinte exemplo cria uma regra chamada #MyParentElement. O elemento é colocado em uma posição absoluta de 100 pixels a partir do topo da página, 50 da esquerda e 30 ao redor do elemento secundário. Usar a propriedade "padding" é crucial, pois eventualmente, representará a componente transparente do elemento principal e centrará o secundário.

    myParentElement {

    position: absolute; top: 100px; left: 50px; padding: 30px; }

  2. 2

    Adicione uma propriedade de transparência à regra #MyParentElement. Esse exemplo usa no elemento principal o valor RGBA da propriedade do fundo em CSS. Em contraste com a propriedade "opacity", a configuração "RGBA" não é passada automaticamente para os elementos secundários. O valor aceita quatro configurações. As três primeiras estabelecem as componentes individuais de vermelho, verde e azul, e o quarta determina a opacidade em uma escala de 0,1 a 1. No exemplo abaixo, os valores de vermelho e verde são deixados em zero, o azul é colocado em 10 e a opacidade é de 0,5. Isso criará uma camada transparente usando uma tela cinza.

    myParentElement {

    position: absolute; top: 100px; left: 50px; padding: 30px; background: rgba(0, 0, 10, 0.5); }

  3. 3

    Escreva uma regra CSS para um elemento secundário. No exemplo abaixo, a regra #myChildElement contém só texto preto sobre um fundo branco. Esse elemento não herdará o valor de opacidade "0,5" da regra #myParentElement.

    myChildElement {

    background: white; color: black; }

  4. 4

    Aplique o CSS ao documento HTML. O CSS estila um div (um elemento do site) secundário com letras pretas sobre fundo branco. Esse div é o que se coloca dentro do div principal. O div principal tem uma borda cinza de 30 pixels (devido à propriedade "padding") e semitransparente. A propriedade de transparência não será herdada pelo div secundário.

    <div id="myParentElement"><div id="myChildElement">O texto deste div secundário vai aqui.</div></div>

Dicas & Advertências

  • O fundo RGBA é suportado pelos navegadores Firefox, Safari, Chrome e Internet Explorer 9. Para compatibilidade com versões anteriores do software, os designers devem usar a propriedade de filtro gradiente da Microsoft (filtro: progid:DXImageTransform) além da propriedade RGBA (veja o link na seção Referências).

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível