79 votos

Cómo hacer que el color de fondo de un div sea transparente en CSS

No estoy usando CSS3. Por lo tanto, no puedo usar los atributos opacity o filter. Sin usar estos atributos, ¿cómo puedo hacer transparente el background-color de un div? Debería ser algo así como el ejemplo de la caja de texto en este enlace. Aquí el color de fondo de la caja de texto es transparente. Quiero hacer lo mismo, pero sin usar los atributos mencionados anteriormente.

156voto

Jerska Puntos 3280

El problema con opacity es que también afectará al contenido, cuando a menudo no quieres que esto suceda.

Si solo quieres que tu elemento sea transparente, es realmente tan fácil como:

background-color: transparent;

Pero si quieres que esté en colores, puedes usar:

background-color: rgba(255, 0, 0, 0.4);

O definir una imagen de fondo (1px por 1px) guardada con el alpha correcto.
(Para hacerlo, utiliza Gimp, Paint.Net u otro software de imagen que te permita hacerlo.
Simplemente crea una nueva imagen, elimina el fondo y coloca un color semi-transparente en ella, luego guárdala en png.)

Como dijo René, lo mejor sería combinar ambos, con el rgba primero y la imagen de 1px por 1px como alternativa si el navegador no admite el alpha:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

Ver también: http://www.w3schools.com/cssref/css_colors_legal.asp.

Demo: Mi JSFiddle

68voto

flem Puntos 12892

La opacidad te da translucidez o transparencia. Mira un ejemplo Fiddle aquí.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Buenos navegadores */

Nota: estas NO son propiedades CSS3

Ver http://css-tricks.com/snippets/css/cross-browser-opacity/

8voto

Suresh Koya Puntos 726

De https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Para establecer el color de fondo:

/* Valor hexadecimal con color y 100% de transparencia */
background-color: #11ffee00;  /* Totalmente transparente */

/* Valores especiales de palabras clave */
background-color: transparent;

/* Valor HSL con color y 100% de transparencia */
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparente */

/* Valor RGB con color y 100% de transparencia */
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparente */

6voto

user1147171 Puntos 160

transparente es el valor por defecto para background-color

http://www.w3schools.com/cssref/pr_background-color.asp

1voto

user3241848 Puntos 18

Podría ser un poco tarde para la discusión, pero inevitablemente alguien tropezará con esta publicación como yo lo hice. Encontré la respuesta que buscaba y pensé en publicar mi propia opinión al respecto. El siguiente JSfiddle incluye cómo superponer archivos .PNG con transparencia. La mención de Jerska sobre el atributo de transparencia para el CSS de la div fue la solución: http://jsfiddle.net/jyef3fqr/

HTML:

   alternar

   alternar

   alternar

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

Y mi inspiración original: http://jsfiddle.net/5g1zwLe3/ También utilicé paint.net para crear los archivos PNG transparentes, o más bien los PNG con fondos transparentes.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X