Come rendere trasparente il colore di sfondo div nei CSS

Question

Non sto usando CSS3. Quindi non posso usare gli attributi opacity o filter. Senza utilizzare questi attributi, come posso rendere trasparente il di un div? Dovrebbe essere il tipo 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 citati.

Answer 1

Opacità consente di traslucenza o la trasparenza. Guarda un esempio 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

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

Answer 2

Il problema con opacity è che influirà anche sul contenuto, quando spesso non si desidera che ciò accada.

Se si desidera solo il vostro elemento per essere trasparente, è davvero così facile come:

background-color: transparent; 

Ma se si vuole che sia nei colori, è possibile utilizzare:

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

Oppure stabilire un'immagine di sfondo (1px per 1px) salvata con la destra alpha.
(Per fare ciò, utilizzare Gimp, Paint.Net o 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 quella di miscelare entrambi, con il primo rgba e la 1px da 1px immagine come un ripiego se il browser non supporta alpha:

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

Answer 3

trasparente è il default per background-color

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

Answer 4

Potrebbe essere un po 'tardi per la discussione B ut inevitabilmente qualcuno inciamperà su questo post come ho fatto io. Ho trovato la risposta che stavo cercando e ho pensato di postare la mia opinione su di essa. Il seguente JSfiddle include come sovrapporre .PNG con trasparenza.menzione di Jerska dell'attributo di trasparenza per i CSS del div era 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 il mio originali ispirazione: http://jsfiddle.net/5g1zwLe3/ Ho anche usato paint.net per creare i PNG trasparenti, o meglio i PNG con BG trasparenti.

Answer 5

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