Publicado em 3 de ago.

efeito alpha em imagem

Boa tarde,

Gostaria de saber se alguem sabe como criar o efeito alpha visto aqui: https://plus.google.com

Onde está escrito:

// Join Google+

Just sign in with your Google account to start using the new parts of Google.

O quadrado de fundo transparente que possibilita ver a imagem de background

Discussão (2)

Entre ou cadastre-se para participar da discussão

brunosk2· 3 de ago.

Você cria a div que vai ficar no fundo, seta o background nela, e na div dentro você seta um background com opacity.

Ou você faz uma imagem no photoshop da cor que você quer, diminui a transparencia (no exemplo deixa em 90%), e salva como PNG.

Obs: A segunda alternativa é para os IEs que não lêem a propriedade opacity, pro IE você tem que pesquisar sobre filtros de opacidade.

Exemplo

.fundo{
background: imagem do fundo
}

.transp{
background-color: #1F1F1F;
opacity: 0.9;
}

/Isso não vai junto, é só caso você use a imagem transparente, ai você não usa o outro .transp/

.transp{
background: Imagem PNG com transparencia;
}
<div class="fundo">
<div class="transp"></div>
</div>

RenanChagas· 4 de ago.

Consegui fazer funcionar, mas no IE não funciona.

Alguem sabe uma solução?

Agradeço desde já