Αδιαφάνεια - CSS-Κόλπα

Η opacityιδιότητα στο CSS καθορίζει πόσο διαφανές είναι ένα στοιχείο.

Βασική χρήση:

div ( opacity: 0.5; )

Η αδιαφάνεια έχει μια προεπιλεγμένη αρχική τιμή 1 (100% αδιαφανής). Η αδιαφάνεια δεν κληρονομείται, αλλά επειδή ο γονέας έχει αδιαφάνεια που ισχύει για οτιδήποτε υπάρχει. Δεν μπορείτε να κάνετε ένα στοιχείο παιδιού λιγότερο διαφανές από τον γονέα, χωρίς κάποια απάτη. Οι τιμές είναι ένας αριθμός από 0 έως 1 που αντιπροσωπεύει την αδιαφάνεια του καναλιού (το κανάλι «άλφα»). Όταν ένα στοιχείο έχει τιμή 0, το στοιχείο είναι εντελώς αόρατο. μια τιμή 1 είναι εντελώς αδιαφανής (στερεά).

Δείτε αυτό το στυλό!

Συμβατότητα IE

Εάν θέλετε η αδιαφάνεια να λειτουργεί σε όλες τις εκδόσεις του IE, η παραγγελία πρέπει να έχει ως εξής:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Εάν δεν χρησιμοποιείτε αυτήν την παραγγελία, το IE8-as-IE7 δεν εφαρμόζει την αδιαφάνεια, αν και το IE8 και ένα καθαρό IE7 ισχύουν.

Σημείωση για στοίβαξη περιβάλλοντος

Εάν ένα στοιχείο με opacityκαι μια τιμή μικρότερη από 1 τοποθετηθεί, η z-indexιδιότητα ισχύει όπως περιγράφεται στο CSS2.1, εκτός από το ότι η autoτιμή αντιμετωπίζεται ως 0, δεδομένου ότι δημιουργείται πάντα ένα νέο περιβάλλον στοίβαξης.

Η αδιαφάνεια μπορεί να χρησιμοποιηθεί ως εναλλακτική λύση στο visibilityακίνητο: visibility: hidden;είναι ακριβώς όπως opacity: 0;.