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.
Respuestas
¿Demasiados anuncios?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
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/
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 */
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.
- Ver respuestas anteriores
- Ver más respuestas