Come rendere il colore di sfondo del div trasparente in CSS

Non sto usando i CSS3. Quindi non posso usare gli attributi opacity o filter. Senza usare questi attributi come posso rendere il colore di sfondo trasparente di un div? Dovrebbe essere come l'esempio della 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 di cui sopra.

Derek 朕會功夫
Domanda modificata 19º luglio 2015 в 12:16
Programmazione
html css background-color transparent
4º agosto 2012 в 8:57
13 visualizzazioni

Il problema con opacità è che influenzerà anche il contenuto, quando spesso non si vuole che questo accada.

Se volete solo che il vostro 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);

Oppure definire un'immagine di sfondo (1px per 1px) salvata con il giusto alpha.
(Per farlo, usa Gimp, Paint.Net o qualsiasi altro software di immagini che ti permetta di farlo.
Basta creare una nuova immagine, cancellare lo sfondo e metterci un colore semitrasparente, poi salvarla in png).

Come detto da René, la cosa migliore da fare sarebbe mescolare entrambi, con il rgba prima e l'immagine 1px per 1px come fallback 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 : [Il mio JSFiddle](http://jsfiddle.net/APSnL/68/)

Jerska
Risposta modificata 4º agosto 2017 в 12:20
Commentari (2)
Soluzione

L'opacità ti dà la traslucenza o la trasparenza. Vedi un esempio [Fiddle qui][1].

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

Adrien Be
Risposta modificata 24º febbraio 2014 в 11:35
Commentari (12)

transparent è l'impostazione predefinita per background-color

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

Commentari (2)