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

Question

No estoy usando CSS3. Entonces no puedo usar los atributos opacity o filter. Sin utilizar estos atributos ¿cómo puedo hacer que el background-color transparente de un div? Debería ser una especie de ejemplo de cuadro de texto en este link. Aquí el color de fondo del cuadro de texto es transparente. Quiero hacer lo mismo, pero sin usar los atributos mencionados anteriormente.

Answer 1

Opacidad le da translucidez o transparencia. Vea un ejemplo Fiddle here.

-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;    /* Good browsers */ 

Nota: these are NOT CSS3 properties

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

Answer 2

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

Si lo que desea es su elemento sea transparente, es realmente tan fácil como:

background-color: transparent; 

Pero si usted quiere que sea en colores, puede utilizar:

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

o definir una imagen de fondo (1px por 1px) guardada con el derecho alpha.
(Para hacerlo, utilice Gimp, Paint.Net o cualquier otro software de imagen que le permite hacer eso.
Basta con crear una nueva imagen, suprimir el fondo y poner un color semitransparente en ella, y luego guardarlo en PNG.)

como dijo por René, lo mejor que puede hacer sería mezclar ambos, con el rgba primera y la imagen 1px por 1px como una alternativa en caso de que el navegador no soporta alfa:

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.

demostración: My JSFiddle

Answer 3

transparente es el predeterminado para background-color

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

Answer 4

Puede ser que sea un poco tarde a la discusión segundo Es inevitable que alguien tropiece con esta publicación como lo hice yo. Encontré la respuesta que estaba buscando y pensé en publicar mi propia opinión. El siguiente JSfiddle incluye cómo superponer .PNG's con transparencia.mención del atributo transparencia para CSS del div de Jerska era la solución: http://jsfiddle.net/jyef3fqr/

HTML:

<button id="toggle-box">toggle</button> 
    <div id="box" style="display:none;" ><img src="x"></div> 
    <button id="toggle-box2">toggle</button> 
    <div id="box2" style="display:none;"><img src="xx"></div> 
    <button id="toggle-box3">toggle</button> 
    <div id="box3" style="display:none;" ><img src="xxx"></div> 

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 originales inspiración: http://jsfiddle.net/5g1zwLe3/ También utilicé paint.net para crear los PNG transparentes, o más bien los PNG con BG transparentes.

Answer 5

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

Para establecer el color de fondo:

/* Hexadecimal value with color and 100% transparency*/ 
background-color: #11ffee00; /* Fully transparent */ 

/* Special keyword values */ 
background-color: transparent; 

/* HSL value with color and 100% transparency*/ 
background-color: hsla(50, 33%, 25%, 1.00); /* 100% transparent */ 

/* RGB value with color and 100% transparency*/ 
background-color: rgba(117, 190, 218, 1.0); /* 100% transparent */