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.
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](
)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/
transparent è l'impostazione predefinita per background-color