Este artigo apresentará o conceito que o ajudará a entender a opacidade em e informam como controlar esse parâmetro. As dicas a seguir serão abordadas neste artigo,
diferença php entre echo e print
- Opacidade em CSS
- Opacidade herdada com elementos em cascata
- Configuração de atributo RGBA para elementos em cascata
- A opacidade muda no efeito de foco
A opacidade do plano de fundo de um elemento é uma configuração de recurso útil no design de HTML. Ao definir o nível de opacidade (inverso da transparência), um designer pode controlar a visibilidade do elemento por meio da propriedade CSS opacity. Isso geralmente é usado como uma configuração de plano de fundo quando há uma cascata de elementos, colocados um acima do outro.
O cenário mais comum em que esse recurso é usado é este:
- Uma imagem de fundo parcialmente transparente é colocada atrás de um elemento de texto.
- A imagem de fundo é vagamente visível, por isso não domina o texto na frente.
- A imagem pode entrar em foco total quando o usuário escolhe explicitamente vê-la.
Você pode querer ler sobre o antes de começar a aprender sobre opacidade CSS.
Para um tutorial de CSS abrangente, visite Tutorial Edureka CSS para iniciantes . Você receberá um excelente aviso sobre como o CSS deve ser usado para aprimorar o design da web em HTML.
Continuando com este artigo sobre Opacidade em CSS
Opacidade em CSS
Em CSS, a opacidade é definida como um valor numérico que varia entre 0,0 - 1,0. Valores mais próximos de zero representam mais transparência, a imagem terá uma visibilidade muito clara. Vamos começar com um exemplo de imagem exibida com 50% de transparência. Veja o Exemplo 1 abaixo.
Exemplo 1: imagem de fundo definida para semi- transparência
img {opacity: 0.5 filter: alpha (opacity = 50) / * Para IE8 e anteriores * /} 
Exemplo 1: saída
Imagem Original (100% Opacidade)
Imagem com configuração de 50% de opacidade
No exemplo acima, havia apenas um elemento - uma imagem. Outros elementos também podem ser definidos com o parâmetro opacity, como texto, elementos div e assim por diante.
Continuando com este artigo sobre Opacidade em CSS
Opacidade herdada com elementos em cascata
Quando os elementos são empilhados uns sobre os outros, se o elemento de fundo tiver a configuração de opacidade, ele será herdado por todos os elementos filho. Isto é o configuração padrão . Isso significa que se uma caixa de texto for colocada sobre uma imagem e a imagem tiver uma configuração de opacidade de 0,5, a imagem e o elemento de texto ficarão apenas parcialmente visíveis.
Tomemos a instância de um elemento de texto filho colocado sobre a imagem TOM & JERRY em nosso próximo exemplo. Podemos ver o efeito de opacidade padrão no Exemplo 2.
.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM JERRYExemplo 2: o texto herda a opacidade da imagem principal
Continuando com este artigo sobre Opacidade em CSS
Configuração de atributo RGBA para elementos em cascata
Existe outra maneira pela qual a opacidade pode ser controlada com elementos em cascata. Se você quiser que o elemento filho não seja afetado pela opacidade de seu elemento de fundo, você pode usar Configuração de atributo RGBA .
Exemplo 3: usando a configuração RGBA
fundo: rgba (76, 175, 80, 1.0) / * A imagem não tem configuração de opacidade * / / * Fundo verde para texto com 100% de opacidade * / / * O texto de cor azul tem 100% de opacidade * /
background: rgba (76, 175, 80, 0.4) / * A imagem não tem configuração de opacidade * / / * Fundo verde para texto com 40% de opacidade * / / * Texto azul ainda visto com 100% de opacidade * /
Após o código de cor RGB, o atributo 'a' significa alfa . o alfa parâmetro é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
Continuando com este artigo sobre Opacidade em CSS
A opacidade muda no efeito de foco
Em alguns cenários, os designers da web desejam que a opacidade varie dependendo se o usuário está focado no elemento ou não. Por exemplo, digamos que uma imagem esteja definida com 50% de opacidade por padrão. No entanto, quando o usuário passa o mouse sobre a imagem, queremos que a imagem entre em foco total com 100% de opacidade.
O Exemplo 4 mostra como isso é feito.
Pontos comuns a serem observados:
- A configuração de opacidade é uma alternativa ao uso do atributo 'visibilidade' em CSS. No entanto, o uso da configuração de opacidade facilita a definição de vários graus de transparência, de zero a total.
- O nível de opacidade deve ser definido após testes cuidadosos em vários navegadores. Quando a opacidade é definida para valores baixos, às vezes o texto ou a imagem pode se tornar completamente invisível ou ilegível.
- A ideia por trás do uso de opacidade é colocar um foco nítido em alguns elementos, enquanto outros elementos de fundo não distraem a atenção do usuário. Portanto, esses elementos de fundo são definidos com opacidade inferior.
- No Internet Explorer, para o IE8 e versões anteriores, a propriedade opacity é uma configuração de 'filtro' que varia de 1 a 100. Em todos os outros navegadores, varia de 0 a 1.
Isso nos leva ao final deste artigo sobre Opacidade em CSS.
Se você estiver interessado em aprender mais sobre desenvolvimento web, confira o por Edureka. O Treinamento de Certificação de Desenvolvimento Web ajudará você a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implantá-lo no Amazon Simple Storage Service (S3).
Se você ainda estiver interessado Se você tiver alguma dúvida, pode postá-la na seção de comentários deste blog “Opacity In CSS” e entraremos em contato com você o mais breve possível.