Agora vamos dar uma dica de como aplicar um background transparente usando CSS que funcione em todos os navegadores: Internet Explorer, Firefox, Chrome e outros. O código CSS abaixo, resolve esse o problema da opacidade no Internet Explorer utilizando um filtro:
|
1 2 3 4 5 6 7 8 |
/* Funciona no Internet Explorer */ filter:opacity(alpha=60); /* Funciona no FireFox */ -moz-opacity:0.6; /* Funciona em outros navegadores */ opacity:0.6; |
Veja um exemplo, clicando aqui. Temos uma imagem, e acima dela, há um texto com um background transparente, ou seja, apesar do texto ter um background, é possível visualizar a imagem que está abaixo através desse background. Segue o código do exemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style type="text/css"> /*Background transparente com CSS */ .imagem { text-align:center; } .texto-transparente { background-color: #0066FF; color: #FFFFFF; font: bold 40px Arial; position: absolute; text-align: center; top: 50px; width: 100%; /* Funciona no Internet Explorer */ filter:opacity(alpha=60); /* Funciona no FireFox */ -moz-opacity:0.6; /* Funciona em outros navegadores */ opacity:0.6; } </style> <div class="imagem"><img src="guarairas.jpg" border="0" alt="" /></div> <div class="texto-transparente">Texto acima da imagem</div> |
Se preferir, baixe o código… Leia Mais »
Rodrigo Filardi
RSS do Blog
