Η ιδιότητα αδιαφάνειας CSS και η αδιαφάνεια εικόνας εξηγούνται

Η opacityιδιότητα ελέγχει πόσο αδιαφανές είναι ένα στοιχείο σε κλίμακα από 0,0 έως 1,0. Όσο χαμηλότερη είναι η τιμή, τόσο πιο διαφανές είναι το στοιχείο.

Μπορείτε να επιλέξετε σε ποιο βαθμό θέλετε να κάνετε το στοιχείο διαφανές. Πρέπει να προσθέσετε την ακόλουθη ιδιότητα CSS για να επιτύχετε τα επίπεδα διαφάνειας.

Πλήρως αδιαφανές

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Ημιδιαφανές

.class-name { opacity: 0.5; }

Πλήρως αδιάβροχο

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε rgbaγια να ορίσετε την αδιαφάνεια ενός στοιχείου:

.class-name{ background-color: rgba(0, 0, 0, .5); }

Αυτό ορίζει background-colorένα στοιχείο σε μαύρο με 50% αδιαφάνεια. Η τελευταία τιμή σε μια rgbaτιμή είναι η τιμή άλφα . Η τιμή άλφα 1 είναι ίση με 100% αδιαφάνεια και 0,5 (ή 0,5 όπως παραπάνω) είναι ίση με 50% αδιαφάνεια.

Αδιαφάνεια εικόνας και διαφάνεια

Η opacityιδιότητα σάς επιτρέπει να κάνετε μια εικόνα διαφανή, μειώνοντας πόσο αδιαφανής είναι.

Opacity παίρνει μια τιμή μεταξύ 0,0 και 1,0.

1.0 είναι η προεπιλεγμένη τιμή για οποιαδήποτε εικόνα. Είναι πλήρως αδιαφανές.

Παράδειγμα

img { opacity: 0.3; }

Συμπερίληψη filter: alpha(opacity=x)για IE8 και νωρίτερα. Το x παίρνει μια τιμή από 0-100.

img { opacity: 0.3; filter: alpha(opacity=30); }

Ακολουθεί ένα παράδειγμα μιας εικόνας που έχει οριστεί στις παραμέτρους στο παραπάνω παράδειγμα.

εικόνα σε αδιαφάνεια 30%

Μπορείτε να κάνετε ζεύξη opacityγια :hoverνα δημιουργήσετε ένα δυναμικό εφέ ποντικιού.

Παράδειγμα:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Ένα παράδειγμα κωδικοποίησης για να δείξει μια διαφανή εικόνα που γυρίζει αδιαφανή στο δείκτη

Μπορείτε να δημιουργήσετε το αντίθετο εφέ με λιγότερο κώδικα, καθώς η εικόνα είναι 1,0 αδιαφάνεια από προεπιλογή

Παράδειγμα:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Ακολουθεί ένα παράδειγμα κωδικοποίησης για να δείξετε διαφάνεια κατά την αναδίπλωση.

Περισσότερα για το CSS

Φύλλα Cascading Style (CSS)

Το CSS είναι ένα αρκτικόλεξο για Cascading Style Sheets. Εφευρέθηκε για πρώτη φορά το 1996 και αποτελεί πλέον τυπικό χαρακτηριστικό όλων των μεγάλων προγραμμάτων περιήγησης στο Web.

Το CSS επιτρέπει στους προγραμματιστές να ελέγχουν τον τρόπο εμφάνισης των ιστοσελίδων «στιλ» τη δομή HTML αυτής της σελίδας.

Οι προδιαγραφές CSS διατηρούνται από το World Wide Web Consortium (W3C).

Μπορείτε να δημιουργήσετε μερικά καταπληκτικά πράγματα μόνο στο CSS, όπως αυτό το παιχνίδι καθαρού CSS Minesweeper (το οποίο δεν χρησιμοποιεί JavaScript).