Μάθετε περισσότερα για την αδιαφάνεια του CSS3

Κάνοντας τα φόντο σας διαφανή

Ένα από τα πράγματα που μπορείτε εύκολα να κάνετε στον σχεδιασμό της εκτύπωσης, αλλά όχι στο Web, είναι να επικαλύψετε κείμενο σε μια εικόνα ή έγχρωμο φόντο και να αλλάξετε τη διαφάνεια αυτής της εικόνας, έτσι ώστε το κείμενο να εξασθενεί στο παρασκήνιο. Αλλά υπάρχει μια ιδιότητα στο CSS3 που θα σας επιτρέψει να αλλάξετε την αδιαφάνεια των στοιχείων σας έτσι ώστε να εξασθενίζουν μέσα και έξω: αδιαφάνεια.

Πώς να χρησιμοποιήσετε την ιδιότητα αδιαφάνειας

Η ιδιότητα αδιαφάνειας παίρνει μια τιμή της διαφάνειας από 0,0 έως 1,0.

Το 0.0 είναι 100% διαφανές - οτιδήποτε κάτω από αυτό το στοιχείο θα εμφανιστεί εντελώς μέσω. Το 1,0 είναι 100% αδιαφανές - τίποτα κάτω από το στοιχείο θα εμφανιστεί.

Έτσι, για να ορίσετε ένα στοιχείο στο 50% διαφανές, θα γράψετε:

αδιαφάνεια: 0,5;

Δείτε μερικά παραδείγματα αδιαφάνειας στη δράση

Βεβαιωθείτε ότι έχετε δοκιμάσει σε παλαιότερα προγράμματα περιήγησης

Ούτε το IE 6 ούτε το 7 υποστηρίζουν την ιδιότητα αδιαφάνειας CSS3. Αλλά δεν είστε τυχεροί. Αντ 'αυτού, το IE υποστηρίζει ένα φίλτρο άλφα ιδιότητας μόνο για τη Microsoft. Τα φίλτρα άλφα στο IE δέχονται τιμές από το 0 (εντελώς διαφανές) έως το 100 (εντελώς αδιαφανές). Έτσι, για να αποκτήσετε τη διαφάνειά σας στο IE, θα πρέπει να πολλαπλασιάσετε την αδιαφάνεια σας κατά 100 και να προσθέσετε ένα φίλτρο άλφα στα στυλ σας:

φίλτρο: άλφα (αδιαφάνεια = 50).

Δείτε το φίλτρο άλφα σε δράση (μόνο IE)

Και Χρήση Προθέματα Browser

Θα πρέπει να χρησιμοποιήσετε τα προθέματα -moz- και -webkit- έτσι ώστε να το υποστηρίζουν και οι παλαιότερες εκδόσεις των browsers του Mozilla και του Webkit:

-webkit-opacity: 0.5;
-την αδιαφάνεια: 0.5;
αδιαφάνεια: 0,5;

Πρώτα τοποθετήστε τα προθέματα του προγράμματος περιήγησης και την τελευταία ισχύουσα ιδιότητα CSS3.

Δοκιμάστε τα προθέματα του προγράμματος περιήγησης στα παλαιότερα προγράμματα περιήγησης Mozilla και Webkit.

Μπορείτε να κάνετε τις εικόνες διαφανείς πάρα πολύ

Ρυθμίστε την αδιαφάνεια στην ίδια την εικόνα και θα εξασθενίσει στο παρασκήνιο. Αυτό είναι πραγματικά χρήσιμο για εικόνες φόντου .

Και αν προσθέσετε μια ετικέτα αγκύρωσης, μπορείτε να δημιουργήσετε εφέ κίνησης μόνο με την αλλαγή της αδιαφάνειας της εικόνας.

α: hover img {
φίλτρο: άλφα (αδιαφάνεια = 50)
φίλτρο: progid: DXImageTransform.Microsoft.Alpha (αδιαφάνεια = 50)
-την αδιαφάνεια: 0.5;
-webkit-opacity: 0.5;
αδιαφάνεια: 0,5;
}}

Επηρεάζει αυτό το HTML:

Δοκιμάστε τα παραπάνω στυλ και HTML σε δράση.

Βάλτε κείμενο στις εικόνες σας

Με την αδιαφάνεια, μπορείτε να τοποθετήσετε κείμενο πάνω σε μια εικόνα και να εμφανιστεί η εικόνα να ξεθωριάζει εκεί όπου είναι αυτό το κείμενο.

Αυτή η τεχνική είναι λίγο δύσκολη, επειδή δεν μπορείτε απλά να ξεθωριάσετε την εικόνα, καθώς αυτό θα εξασθενίσει ολόκληρη την εικόνα. Και δεν μπορείτε να ξεθωριάσετε το πλαίσιο κειμένου , επειδή το κείμενο θα εξασθενίσει και εκεί.

1. Αρχικά δημιουργείτε ένα δοχείο DIV και τοποθετείτε την εικόνα σας μέσα:

   
   

2. Ακολουθήστε την εικόνα με ένα κενό DIV - αυτό είναι που θα κάνετε διαφανές.

   
   
   

3. Το τελευταίο πράγμα που προσθέτετε στην HTML σας είναι το DIV με το κείμενό σας σε αυτό:

   
   
   
   Αυτός είναι ο σκύλος μου Shasta. Δεν είναι χαριτωμένος!

4. Τον στυλίζετε με την τοποθέτηση CSS, για να τοποθετήσετε το κείμενο πάνω από την εικόνα. Έβαλα το κείμενό μου στην αριστερή πλευρά, αλλά μπορείτε να το βάλετε δεξιά, αλλάζοντας τα δύο αριστερά: 0; ιδιότητες προς τα δεξιά: 0; .

   #εικόνα {
   θέση: σχετική.
   πλάτος: 170px;
   ύψος: 128px;
   περιθώριο: 0;
   }}
   #text {
   θέση: απόλυτη;
   κορυφή: 0;
   αριστερά: 0;
   πλάτος: 60px;
   ύψος: 118px;
   background: #fff;
   padding: 5px;
   }}
   #text {
   φίλτρο: άλφα (αδιαφάνεια = 70).
   φίλτρο: progid: DXImageTransform.Microsoft.Alpha (αδιαφάνεια = 70);
   -την αδιαφάνεια: 0.70;
   αδιαφάνεια: 0,7;
   }}
   #words {
   θέση: απόλυτη;
   κορυφή: 0;
   αριστερά: 0;
   πλάτος: 60px;
   ύψος: 118px;
   φόντο: διαφανές;
   padding: 5px;
   }}

Δείτε πώς φαίνεται