Γράψτε το κείμενο (με ημι-διαφανές φόντο) πάνω από μια εικόνα

Ένα αποτέλεσμα που είναι αρκετά κοινό να δουν οι τοποθεσίες και τα blogs επόμενη γενιά, είναι γραμμένα στο λεγόμενο κάλυμμα πάνω από τις εικόνες, που συχνά συνοδεύεται από ένα σκούρο διαφανές φόντο. Εδώ είναι ένα παράδειγμα:

Σε αυτό το άρθρο θα κάνουμε την αντικατάσταση των εικόνων μας με χρήση CSS.

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε μια HTML δομή όπως αυτό:

 <div class="boximg">



  



 <img border="0" src="tramonto.jpg"/>



  



 <div class="boxtesto">



    



 <span class="testo"> ένα υπέροχο ηλιοβασίλεμα! </ p>



  



 </ P>







 </ P>

Όπως βλέπετε έχω δημιουργήσει ένα δοχείο DIV (με την τάξη ". Boximg»), στο οποίο τη θέση της εικόνας μου και μια νέα div (με την τάξη ". Boxtesto"), η οποία με τη σειρά του περιέχει έναν κύκλο που σηματοδοτεί το κείμενο που θέλετε να εφαρμόσετε .

Ας δούμε τώρα το CSS ότι, ουσιαστικά, του χώρου εργασίας:

 . Boximg {



  



 θέση: σχετική?



  



 Πλάτος: 400px? / * ίδιο πλάτος της εικόνας * /



  



 Ύψος: 300px? / * Το ίδιο ύψος εικόνας * /







 }







 {Div.boxtesto



  



 θέση: απόλυτη?



  



 κάτω: 0px?



  



 αριστερά: 0px?



  



 πλάτος: 100%?



  



 υπόβαθρο: rgb (0, 0, 0)?



  



 υπόβαθρο: RGBA (0, 0, 0, 0,6)?







 }







 {Span.testo



  



 padding: 10px?



  



 χρώμα: # FFFFFF?



  



 font: έντονη 24px/45px Helvetica, sans-serif?



  



 επιστολή-απόσταση:-1px?







 }

Το κουτί αποθήκευσης (". Boximg") έχει το ίδιο μέγεθος και τη σχετική θέση με την εικόνα που έχει σκοπό να φιλοξενήσει.
Το κουτί αποθήκευσης του κειμένου (". Boxtesto") είναι το επίκεντρο της δουλειάς μας έχει απόλυτη τοποθέτηση, η οποία αφαιρεί από την κανονική ροή των στοιχείων και τοποθετείται στην κάτω αριστερή γωνία του περιέκτη του και προφανώς έχει πλάτος έως 100% για να καταλάβει το σύνολο του διαθέσιμου χώρου οριζοντίως. Ενδιαφέρον, λοιπόν, οι δύο ορισμοί του φόντου χρησιμοποιώντας RGB και RGBA που χρησιμεύουν για να καθορίσουν το σκούρο φόντο και ημιδιαφανές.
Η έκταση. "Κείμενο", τέλος, έχει ως μοναδικό σκοπό να στυλιζάρω το κείμενο και να εφαρμόσετε μια μικρή "padding.

• <<
• 1
• 2
• >>