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

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

La opacidad te brinda translucidez o transparencia. Vea un ejemplo de 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;               /* Good browsers */

Nota: estas NO son propiedades CSS3

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

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

Si solo desea que su 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 defina una imagen de fondo ( 1pxpor 1px) guardada con la derecha alpha.
(Para ello, el uso Gimp, Paint.Neto cualquier otro software de imagen que le permite hacer eso.
Basta con crear una nueva imagen, eliminar el fondo y poner un color semitransparente en él, a continuación, guardarlo en PNG).

Según lo dicho por René , lo mejor que puede hacer sería mezclar ambos, con el rgbaprimero y el 1pxde 1pxla imagen 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

transparente es el valor predeterminado para el color de fondo

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

Desde 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 */

Puede que sea un poco tarde para la discusión, pero inevitablemente alguien tropezará 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 con transparencia. La mención de Jerska del atributo de transparencia para el CSS del div fue 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 inspiración original: http://jsfiddle.net/5g1zwLe3/ También usé paint.net para crear los PNG transparentes, o más bien los PNG con BG transparentes.

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */