Πώς να κάνετε το χρώμα φόντου div διαφανές στο CSS

Το πρόβλημα με την "αδιαφάνεια" είναι ότι θα επηρεάσει επίσης το περιεχόμενο, ενώ συχνά δεν θέλετε να συμβεί αυτό.

Αν θέλετε απλώς το στοιχείο σας να είναι διαφανές, είναι πραγματικά τόσο εύκολο όσο :

background-color: transparent;

Αλλά αν θέλετε να είναι σε χρώματα, μπορείτε να χρησιμοποιήσετε:

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

Ή να ορίσετε μια εικόνα φόντου (1px επί 1px) αποθηκευμένη με το σωστό alpha.
(Για να το κάνετε αυτό, χρησιμοποιήστε το Gimp, το Paint.Net ή οποιοδήποτε άλλο λογισμικό εικόνας που σας επιτρέπει να το κάνετε αυτό.
Απλά δημιουργήστε μια νέα εικόνα, διαγράψτε το φόντο και βάλτε ένα ημιδιαφανές χρώμα, και μετά αποθηκεύστε την σε png).

Όπως είπε ο René, το καλύτερο που έχετε να κάνετε είναι να αναμίξετε και τα δύο, με την rgba πρώτα και την εικόνα 1px επί 1px ως εφεδρική λύση αν το πρόγραμμα περιήγησης δεν υποστηρίζει alpha :

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

Βλέπε επίσης : http://www.w3schools.com/cssref/css_colors_legal.asp.

Demo : [My JSFiddle](http://jsfiddle.net/APSnL/68/)

Η αδιαφάνεια σας δίνει διαύγεια ή διαφάνεια. Δείτε ένα παράδειγμα [Fiddle εδώ][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 */

Σημείωση: αυτές ΔΕΝ είναι ιδιότητες CSS3

Βλέπε http://css-tricks.com/snippets/css/cross-browser-opacity/

Το διαφανές είναι η προεπιλογή για το χρώμα φόντου.

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