Come rendere il colore di sfondo div trasparente nei CSS

Non sto usando CSS3. Quindi non posso usare opacityo filterattributi. Senza usare questi attributi come posso rendere background-colortrasparente un div? Dovrebbe essere una specie di esempio di casella di testo in questo link . Qui il colore di sfondo della casella di testo è trasparente. Voglio fare lo stesso, ma senza usare gli attributi sopra menzionati.

L'opacità ti dà traslucenza o trasparenza. Vedi un esempio Fiddle qui .

-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: queste NON sono proprietà CSS3

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

Il problema opacityè che influenzerà anche il contenuto, quando spesso non si desidera che ciò accada.

Se vuoi solo che il tuo elemento sia trasparente, è davvero facile come:

background-color: transparent;

Ma se vuoi che sia a colori, puoi usare:

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

O definire un'immagine di sfondo ( 1pxdi 1px) salvata con il diritto alpha.
(Per fare ciò, l'uso Gimp, Paint.Neto qualsiasi altro software di immagini che ti permette di fare questo.
Basta creare una nuova immagine, eliminare lo sfondo e mettere un colore semi-trasparente in esso, quindi salvarlo in formato PNG.)

Come detto da René , la cosa migliore da fare sarebbe mescolare entrambi, con la rgbaprima e l' immagine 1pxby 1pxcome fallback se il browser non supporta l'alfa:

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

Vedi anche : http://www.w3schools.com/cssref/css_colors_legal.asp .

Demo : My JSFiddle

trasparente è l'impostazione predefinita per il colore di sfondo

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

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

Per impostare il colore di sfondo:

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

Potrebbe essere un po 'tardi per la discussione, ma inevitabilmente qualcuno si imbatterà in questo post come ho fatto io. Ho trovato la risposta che cercavo e ho pensato di pubblicare la mia opinione su di essa. Il seguente JSfiddle include come sovrapporre .PNG con trasparenza. La menzione di Jerska dell'attributo di trasparenza per il CSS del div è stata la soluzione: 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' });
});

E la mia ispirazione originale: http://jsfiddle.net/5g1zwLe3/ Ho anche usato paint.net per creare PNG trasparenti, o piuttosto PNG con BG trasparenti.

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