Un efecto chulo con transparencia gracias a CSS
Escrito por J.F. el Miércoles, 8 de Agosto del 2007 a las 21:57
Pues aquí una capa con transparencia, que da un efecto bastante chulo, realizado con CSS. Simplemente copiar y pegar el código, colocar la imagen que deseen como fondo, y disfrutar:
HTML:
-
<style type="text/css">
-
div.background
-
{
-
width: 500px;
-
height: 250px;
-
background: url(img.jpg) repeat;
-
border: 2px solid black;
-
}
-
div.transbox
-
{
-
width: 400px;
-
height: 180px;
-
margin: 30px 50px;
-
background-color: #ffffff;
-
border: 1px solid black;
-
/* for IE */
-
filter:alpha(opacity=60);
-
/* CSS3 standard */
-
opacity:0.6 ;
-
/* for Mozilla */
-
-moz-opacity:0.6;
-
}
-
div.transbox p
-
{
-
margin: 30px 40px;
-
font-weight: bold;
-
color: #000000;
-
}
-
</style>
-
<div class="transbox">
-
-
Lore ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat. Lore ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluptat.
-
</p>
-
</div>
-
</div></body>
-
</html>
La imagen que se usará como fondo debe llamarse img.jpg, o bien le cambias el nombre por la que uses dentro del código CSS.
Categoria: CSS
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
No hay comentarios
Entradas relacionadas
Deja un comentario
Escribir un comentario
