2 maneras de crear un fondo transparente para un div

Muchas veces es interesante jugar con fondos semi-transparentes en nuestros elementos de la página web para hacerla más atractiva y funcional.

Para ello os propongo dos maneras muy sencillas:

1- Con CSS3, utilizando la propiedad Opacity y RGBA:

«background-color: rgb(0,0,255); opacity: 0.5;»
«background-color: rgba(0,0,255,0.5);»


2- Con una imagen de fondo:

Con este sistema nos aseguramos que no falle nunca independiente de navegadores, versiones etc…
Se trata de crear una imagen en Photoshop con un solo color y una capa con poca opacidad para que sea transparente.
Debemos guardarla en PNG para que conserve la transparencia y podemos hacerla tan pequeña como queramos, 1px x 1px si queremos.
En nuestro CSS llamámos a la imagen con «background-image:nombredelarxivo.png» y se repetirá hasta llenar el fondo de nuestro Div

Compartir

4 comentarios sobre “2 maneras de crear un fondo transparente para un div”

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>