Σε γενικές γραμμές, η ίδια η ερώτηση είναι απλή. Δεν υπάρχει τίποτα δύσκολο να τοποθετήσετε ένα μπλοκ πάνω στο άλλο. Ωστόσο, υπάρχουν αρκετά σημεία σε αυτό το θέμα που αξίζει να συζητηθούν. Νομίζω ότι θα υπάρξουν άνθρωποι που θα ενδιαφέρονται για αυτό.

Η ιδέα είναι απλώς να επικαλύψετε κάποιο κείμενο σε μια εικόνα. Το κείμενο παρουσιάζεται σε μπλοκ μεταβλητού μήκους, υποτίθεται ότι θα βρίσκεται στην αριστερή πλευρά, με ομοιόμορφο γέμισμα γύρω από το κείμενο. Για παράδειγμα, όπως σε αυτή την εικόνα:

Περίγραμμα εγγράφου

Σήμανση HTML

Μια ταινία στο πάρκο:
Kung Fu Panda

Φυσικά, θα ήταν ευκολότερο να χρησιμοποιήσετε ένα στοιχείο div για να εμφανίσετε μια εικόνα ως φόντο, αλλά σε αυτήν την περίπτωση υποθέτω ότι η εικόνα είναι το περιεχόμενο του εγγράφου και επομένως ανήκει στο HTML. Θα χρησιμοποιήσουμε το στοιχείο div ως δοχείο για την απόλυτη τοποθέτηση του κειμένου σε αυτό.

CSS

Έτσι τοποθετήσαμε το κείμενο ακριβώς πάνω από την εικόνα. Η επόμενη εργασία μας είναι να δημιουργήσουμε ένα φόντο για το κείμενο. Δεδομένου ότι το στοιχείο

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

Μια ταινία στο πάρκο:
Kung Fu Panda

Θα χρησιμοποιήσουμε αυτό το διάστημα για να διακοσμήσουμε το κείμενο και το φόντο:

Έκταση H2 ( χρώμα: λευκό, γραμματοσειρά: έντονη γραφή 24 px/45 px Helvetica, Sans-Serif, διάστιχο: -1 px; φόντο: rgb(0, 0, 0); /* σε περίπτωση που η επόμενη γραμμή δεν λειτουργεί */ φόντο : rgba(0, 0, 0, 0.7);

Προβλήματα

Όπως μπορείτε να δείτε από το σχήμα, στο τέλος μιας γραμμής, το μπλοκ κειμένου τελειώνει αμέσως μετά τον τελευταίο χαρακτήρα της γραμμής και ξεκινά αμέσως προς τα αριστερά στην επόμενη γραμμή. Η ιδιότητα padding for a span δεν θα μας βοηθήσει σε αυτή την περίπτωση.

Για να λύσετε το πρόβλημα, πρέπει να χρησιμοποιήσετε πρόσθετα ανοίγματα και στις δύο πλευρές της ετικέτας
, σε αυτήν την περίπτωση μπορούμε ήδη να χρησιμοποιήσουμε padding.

Μια ταινία στο πάρκο:
Kung Fu Panda

Θα ορίσουμε την ιδιότητα padding σε αυτά τα νέα ανοίγματα:

H2 span.space ( padding: 0 5px; )

Τι γίνεται με τη σημασιολογία;

Σε αυτό το στάδιο ο σχεδιασμός έχει ολοκληρωθεί, αλλά ένα πρόβλημα παραμένει. Δηλαδή, ένας τεράστιος αριθμός πρόσθετων στοιχείων HTML προστέθηκαν μόνο για σχεδιασμό. Εννοώ ανοίγματα. Για να λύσουμε αυτό το πρόβλημα, θα χρησιμοποιήσουμε το jQuery. Για να το κάνετε αυτό, διαγράψτε όλα τα ανοίγματα στη σήμανση και προσθέστε τα δυναμικά:

Μια ταινία στο πάρκο:
Kung Fu Panda

$(function() ( $("h2").wrapInner(" "); $("h2 br").before(" ").μετά(" "); });

Βλαντ Μέρζεβιτς

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

Κεντρικό σχέδιο

Για να στοιχίσετε μια εικόνα στο κέντρο μιας στήλης κειμένου, προσθέστε ετικέτα τοποθετείται σε δοχείο

Για το οποίο έχει οριστεί το χαρακτηριστικό align="center". Αλλά αν σκοπεύετε να χρησιμοποιήσετε ενεργά εικονογραφήσεις, τότε είναι καλύτερο να δημιουργήσετε μια νέα κατηγορία στυλ, ας την ονομάσουμε fig, και να την εφαρμόσετε στις απαιτούμενες παραγράφους, όπως φαίνεται στο παράδειγμα 1.

Παράδειγμα 1: Ευθυγράμμιση μιας εικόνας στο κέντρο

Σε αυτό το παράδειγμα, η κλάση fig προστίθεται στον επιλογέα P και η μέθοδος στοίχισης καθορίζεται από την ιδιότητα text-align. Η θέση της εικόνας σε σχέση με το κείμενο φαίνεται σχηματικά στο Σχ. 1.

Αναδίπλωση κειμένου γύρω από μια εικόνα

Η αναδίπλωση κειμένου γύρω από μια εικόνα είναι μία από τις δημοφιλείς τεχνικές διάταξης ιστοσελίδων, όταν η εικόνα βρίσκεται κατά μήκος της άκρης του παραθύρου του προγράμματος περιήγησης και το κείμενο περιστρέφεται γύρω από αυτήν στις άλλες πλευρές (Εικ. 2). Για να δημιουργήσετε αναδίπλωση κειμένου γύρω από μια εικόνα, υπάρχουν διάφορες μέθοδοι που σχετίζονται τόσο με τη δυνατότητα ετικετών HTML όσο και με τη χρήση στυλ.

Ναι, στην ετικέτα Υπάρχει ένα χαρακτηριστικό align που καθορίζει την ευθυγράμμιση της εικόνας. Αυτό το χαρακτηριστικό καθορίζει σε ποια άκρη του παραθύρου θα τοποθετηθεί το σχέδιο, ενώ ρυθμίζει επίσης πώς θα αναδιπλώνεται το κείμενο. Για να στοιχίσετε την εικόνα προς τα δεξιά και να ορίσετε το αριστερό περιτύλιγμα, χρησιμοποιήστε την τιμή δεξιά , για να στοιχίσετε προς τα αριστερά χρησιμοποιήστε αριστερά . Το χαρακτηριστικό align χρησιμοποιείται συχνά σε συνδυασμό με άλλα χαρακτηριστικά ετικέτας. - vspace και hspace. Καθορίζουν την απόσταση από το μετακινούμενο κείμενο στην εικόνα. Χωρίς αυτά τα χαρακτηριστικά, η εικόνα και το κείμενο θα ταιριάζουν πολύ μεταξύ τους (παράδειγμα 2).

Παράδειγμα 2: Χρήση ιδιοτήτων ετικέτας

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

Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα στυλ float για να τυλίξετε κείμενο γύρω από μια εικόνα. Η τιμή δεξιά θα ευθυγραμμίσει την εικόνα στη δεξιά άκρη του παραθύρου του προγράμματος περιήγησης και το κείμενο θα αναδιπλωθεί στα αριστερά της εικόνας (παράδειγμα 3). Η αριστερή τιμή, από την άλλη πλευρά, ευθυγραμμίζει την εικόνα προς τα αριστερά και το κείμενο στα δεξιά της εικόνας.

Παράδειγμα 3: Χρήση στυλ

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Σε αυτό το παράδειγμα, στην ετικέτα προστίθεται η κλάση fig, η οποία έχει ρυθμιστεί να ευθυγραμμίζεται προς τα δεξιά και, κατά συνέπεια, να τυλίγει την εικόνα στα αριστερά. Για να αποφευχθεί η στενή γειτνίαση του κειμένου με την εικόνα, εφαρμόζονται οι ιδιότητες padding-left και padding-bottom.

Σχέδιο στο γήπεδο

Με αυτό το σχήμα, η εικόνα βρίσκεται δεξιά ή αριστερά του κειμένου και ρέει μόνο στη μία πλευρά. Στην πραγματικότητα, μοιάζει με δύο στήλες, εκ των οποίων η μία περιέχει σχέδιο και η άλλη περιέχει κείμενο (Εικ. 3).

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

Χρήση πινάκων

Οι πίνακες είναι βολικοί επειδή σας επιτρέπουν να δημιουργήσετε εύκολα μια δομή στήλης χρησιμοποιώντας κελιά. Θα χρειαστείτε έναν πίνακα με τρία κελιά, το ένα θα περιέχει μια εικόνα, το δεύτερο θα περιέχει κείμενο και το τρίτο θα χρειαστεί για να δημιουργήσετε μια εσοχή μεταξύ τους. Μπορείτε επίσης να τα βγάλετε πέρα ​​με δύο κελιά και να ορίσετε την απαιτούμενη απόσταση μέσω στυλ ή χρησιμοποιώντας το χαρακτηριστικό πλάτος της ετικέτας . Το Παράδειγμα 4 δείχνει πώς να δημιουργήσετε τον καθορισμένο πίνακα.

Παράδειγμα 4: Δημιουργία εικόνας στο πεδίο με χρήση πινάκων

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

Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 4.

Ρύζι. 4. Εικόνα στα αριστερά του κειμένου

Σε αυτό το παράδειγμα, το πλάτος της εικόνας είναι 90 pixel και το πλάτος της στήλης όπου βρίσκεται είναι 110 pixel. Η διαφορά μεταξύ τους παρέχει την απαιτούμενη απόσταση από το κείμενο στην εικόνα. Για να αποτρέψετε την παρέμβαση των χαρακτηριστικών του κελιού διαστήματος κελιών και του κελιού του πίνακα στη διαδικασία, είναι προτιμότερο να μηδενίσετε τις τιμές τους. Λάβετε υπόψη ότι τα κελιά είναι ευθυγραμμισμένα κατά ύψος.

Χρήση στυλ

Σε αυτή την περίπτωση, θα χρειαστούμε δύο επίπεδα, οι παράμετροι των οποίων θα αλλάξουν μέσω CSS. Ας τοποθετήσουμε την εικόνα σε ένα επίπεδο που ονομάζεται pic και το κείμενο, χωρίς περαιτέρω καθυστέρηση, στο επίπεδο κειμένου. Τώρα το επίπεδο pic θα πρέπει να έχει την ιδιότητα float ρυθμισμένη στα αριστερά και την ιδιότητα κειμένου στο περιθώριο-αριστερά. Η τιμή αυτής της παραμέτρου είναι ίση με το πλάτος της εικόνας συν την απαιτούμενη εσοχή στο κείμενο (παράδειγμα 5).

Παράδειγμα 5: Χρήση περιθωρίου

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

Η ιδιότητα float σε αυτό το παράδειγμα είναι απαραίτητη έτσι ώστε το επάνω άκρο του κειμένου να ταιριάζει με το επάνω άκρο της εικόνας. Χωρίς αυτήν την ιδιότητα, το επίπεδο κειμένου πέφτει στο ύψος της εικόνας.

Εάν η εικόνα πρέπει να τοποθετηθεί στα δεξιά του κειμένου, τότε αλλάξτε την τιμή float σε δεξιά και την ιδιότητα margin-left σε margin-right .

Κάθε μέρα στα φόρουμ html, οι αρχάριοι ρωτούν: "Πώς να βάλω κείμενο πάνω από μια εικόνα;" Μερικοί άνθρωποι βρίσκουν τη λάθος διέξοδο: σχεδιάζουν κείμενο σε μια εικόνα σε προγράμματα επεξεργασίας γραφικών και, στη συνέχεια, τοποθετούν την εικόνα με το κείμενο σε έγγραφα html. Τι γίνεται όμως αν το κείμενο πρέπει να αντικατασταθεί; Να ξανασχεδιάσετε την εικόνα; Υπάρχουν απλούστερες λύσεις.

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

Παρασκευή

Ας βγάλουμε μια φωτογραφία

Το μέγεθός του είναι 350px × 200px. Και αυτές οι πληροφορίες είναι αρκετές για να ξεκινήσετε.
Τώρα ας προσπαθήσουμε να τοποθετήσουμε κείμενο από πάνω του με διάφορους τρόπους.

Μέθοδος 1: εικόνα ως φόντο div

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

Η ουσία της μεθόδου είναι ότι παίρνουμε μια ετικέτα div, της δίνουμε διαστάσεις που ταιριάζουν με το μέγεθος της εικόνας και ορίζουμε την εικόνα ως φόντο.
Λάβετε υπόψη ότι μέγεθος ετικέτας = εγγενές μέγεθος + μέγεθος padding. Έτσι, εάν θέλουμε να κάνουμε εσοχή στο περιεχόμενο από την άκρη της εικόνας κατά 20 εικονοστοιχεία, τότε το μέγεθος του ίδιου του div πρέπει να καθοριστεί ώστε να είναι μικρότερο κατά 20 εικονοστοιχεία. Δηλαδή: 350-20 = 330 σε πλάτος και 200-20 = 180 σε ύψος.

Κείμενο

Παράδειγμα 1 (
padding-top:20px;
πλάτος: 330 px;
padding-left:20px;
ύψος: 180 px;
background-image:url("/examples/20120821/bg.png");

/*μορφοποίηση κειμένου*/
χρώμα:#FFF;

μέγεθος γραμματοσειράς: 40 px;
}

Αποτέλεσμα:

Η μέθοδος είναι απλή όσον αφορά τη δομή του κώδικα HTML (απαιτείται μόνο μία ετικέτα), αλλά δεν σας επιτρέπει να ορίσετε ειδικά στυλ στο κείμενο. Ως αποτέλεσμα, το κείμενο μπορεί να είναι δύσκολο να διαβαστεί. Επιπλέον, το μπλοκ είναι αυστηρά συνδεδεμένο με το μέγεθος της εικόνας, πράγμα που σημαίνει ότι εάν αλλάξει η εικόνα, το css θα πρέπει να ξαναγραφτεί

Μέθοδος δεύτερη: επικάλυψη δύο ετικετών η μία πάνω στην άλλη

Η ουσία αυτής της μεθόδου είναι ότι φτιάχνουμε ένα δοχείο div που θα περιέχει μια εικόνα και κείμενο. Σε αυτήν την περίπτωση, θα τοποθετήσουμε το κείμενο σε σχέση με την επάνω αριστερή γωνία του κοντέινερ.

Κείμενο

Παράδειγμα 2 (
display:inline-block;
θέση:συγγενής;

}
.example2 span(
display:inline-block;
θέση:απόλυτη;
κορυφή:30px;
αριστερά:0px;

/* Διακόσμηση κειμένου */
χρώμα:#FFF;
γραμματοσειρά-οικογένεια:Arial, Helvetica, sans-serif;
μέγεθος γραμματοσειράς: 20 px;

/* Ιστορικό */
φόντο-χρώμα:rgba(0,0,0,.4);
padding: 10px 30px;
}

Παράδειγμα 2:
Χρειαζόμαστε display:inline-block έτσι ώστε το κοντέινερ να μην εκτείνεται σε ολόκληρη τη σελίδα.
position:relative αναγκάζει όλα τα ένθετα μπλοκ με position:absolute να μετρούν τις συντεταγμένες της θέσης τους όχι από το παράθυρο του προγράμματος περιήγησης, αλλά από το block.example2.

Παράδειγμα 2 εύρους:
display:inline-block - ώστε να μπορούν να εφαρμοστούν στο κείμενό μας στυλ που σχετίζονται με στοιχεία μπλοκ.
position:absolute - για την αφαίρεση μιας ετικέτας από τη γενική ροή και την περαιτέρω τοποθέτησή της χρησιμοποιώντας την εργασία συγκεκριμένων συντεταγμένων. επάνω, αριστερά — επάνω και αριστερή εσοχή (συντεταγμένες). είναι δυνατό να χρησιμοποιήσετε το κάτω (κάτω) και το δεξί (δεξιά) αντί

Αποτέλεσμα:

Το μειονέκτημα αυτής της μεθόδου είναι ότι παραβιάζεται η σημασιολογία του κώδικα και εμφανίζονται πολλές περιττές ετικέτες. Αλλά δεν συνδέεται με το μέγεθος της εικόνας, σας επιτρέπει να δημιουργήσετε ένα φόντο για το κείμενο, καθιστώντας το πιο ευανάγνωστο και γενικά μας δίνει απόλυτη ελευθερία στην προσαρμογή στυλ.

Παίζοντας με τη δομή css και ετικετών, μπορείτε να επιτύχετε το ακόλουθο αποτέλεσμα:

Αυτό το αποτέλεσμα είναι αρκετά καλό για το σχεδιασμό γκαλερί, διαδικτυακών βιτρινών και άλλων υπηρεσιών.

Κωδικός τελευταίου αποτελέσματος:

Είμαι ο τίτλος

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

Παράδειγμα 3 (
display:inline-block;
θέση:συγγενής;
}
.example3 .example_text (
display:block;
θέση:απόλυτη;
αριστερά: 0;
bottom:0;
πλάτος:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

padding:10px;
φόντο-χρώμα:rgba(0,0,0,.3);

}
.example3 h6 (
γραμματοσειρά-οικογένεια:Arial, Helvetica, sans-serif;
μέγεθος γραμματοσειράς: 18 px;
}
.example3 span (
μέγεθος γραμματοσειράς: 12 px;
}

θέση:συγγενής; υπερχείλιση: κρυφό;

Εάν χρειάζεται να εμφανίσετε μόνο μέρος του μπλοκ φωτός, αφαιρώντας άνισα τα περιττά pixel, χρησιμοποιήστε την ιδιότητα κλιπ: ορθό (πάνω, δεξιά, κάτω, αριστερά);που δεν ισχύει χωρίς θέση: απόλυτη. Αυτόματο δείχνει ότι η πλευρά παραμένει αμετάβλητη.

θέση:συγγενής;

κλιπ: ορθό (αυτόματο, 200 εικονοστοιχεία, αυτόματο, 30 εικονοστοιχεία);

Αλληλεπίδραση μπλοκ με θέση: απόλυτη με άλλα στοιχεία

Μπορούμε να τοποθετήσουμε πολλά στοιχεία σε ένα μπλοκ. Για ευκολία αντίληψης, δεν θα αναφέρω.

ΕΝΑ

σι

Εάν το μπλοκ Α έχει θέση: απόλυτη, τότε το μπλοκ Β θα τοποθετηθεί σαν να μην υπάρχει το μπλοκ Α - θα πάρει τη θέση του. Το μπλοκ Α δεν θα μπορεί πλέον να επηρεάσει τη θέση του μπλοκ Β είτε μέσω είτε με την περιοχή του, σαν να αιωρείται από πάνω του.

ΕΝΑ

σι

Το μπλοκ Α επικαλύπτει το μπλοκ Β. Αλλά μόλις το δεύτερο προσθέσει θέση στην τιμή σχετική, απόλυτη ή σταθερή, η κατάσταση αλλάζει.

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

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

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

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

Τώρα προτεραιότητα θα έχει το μπλοκ που βρίσκεται πιο κάτω στον κωδικό, σε αυτήν την περίπτωση το λευκό Β. Για να αλλάξουμε τη φυσική σειρά, χρησιμοποιούμε z-δείκτης. Όσο υψηλότερη είναι η τιμή αυτής της παραμέτρου, τόσο υψηλότερο είναι το στοιχείο. Αξίζει μόνο να θυμόμαστε ότι για θέση: στατική αυτή η ιδιότητα αγνοείται (εξαιρείται η ιδιότητα) και ότι στο IE υπάρχει ένα .

Α

Β

Δεδομένου ότι τα στοιχεία δεν μπορούν να επηρεάσουν τη θέση του άλλου, χωρίς να καθορίσετε τιμές για αυτά (ή εάν οι τιμές είναι ίδιες), το επάνω, το κάτω, το δεξί, το αριστερό και το περιθώριο βρίσκονται το ένα πάνω στο άλλο. Και το ύψος του γονικού μπλοκ, αν δεν είναι σταθερό, είναι μηδέν. Πολλά πράγματα βασίζονται σε αυτήν την αρχή, συμπεριλαμβανομένων.

ΕΝΑ

σι

πλάτος και θέση: απόλυτη

το πλάτος (ή το ύψος) δεν ισχύει για τα περισσότερα ενσωματωμένα στοιχεία. Η προεπιλεγμένη τιμή είναι η αυτόματη, η οποία για ένα στοιχείο μπλοκ ισοδυναμεί με πλάτος: 100%.

Χονδρός

Vst roen ny

Ενσωματωμένο

Vst roen ny

Ενσωματωμένο

πλάτος: 100%; και για τα δύο, αυτό είναι το πλάτος του γονέα, το οποίο έχει οριστεί σε θέση διαφορετική από τη στατική.

Χονδρός

Vst roen ny

Ενσωματωμένο

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

Χονδρός

Vst roen ny

Ενσωματωμένο

Ένα παράδειγμα για το πώς να γράψετε κείμενο σε μια εικόνα.

Τα ακόλουθα δείγματα θα δείξουν τη δύναμη της χρήσης επικαλύψεων CSS.

Το δάσος και το χωράφι είναι λευκά,
Λευκά λιβάδια.
Κοντά στις χιονισμένες λεύκες
Κλαδιά σαν κέρατα.

Κάτω από τον δυνατό πάγο
Τα νερά των ποταμών κοιμούνται.
Λευκές χιονοστιβάδες
Χιόνι έπεσε στις στέγες.

Τα αστέρια είναι φωτεινά στον ουρανό
Οδηγούν έναν στρογγυλό χορό.
Η παλιά χρονιά λέει αντίο -
Έρχεται το νέο έτος.

Ε. Τρούτνεβα.

ποίημα

συγγραφέας

Ένα παράδειγμα για το πώς να τοποθετήσετε ένα κείμενο σε ένα άλλο.

Παράδειγμα

Δείγμα

Παράδειγμα

Δείγμα

Παράδειγμα για το πώς να τοποθετήσετε κείμενο πάνω από μια εικόνα σε HTML

Πώς να γράψετε κείμενο σε μια εικόναΑυτή η επιλογή γίνεται ολοένα και πιο δημοφιλής και είναι δυνατή με την επικάλυψη ενός επιπέδου πάνω στο άλλο χρησιμοποιώντας ιδιότητες CSS.

Μερικοί άνθρωποι βρίσκουν τη λάθος διέξοδο: σχεδιάζουν κείμενο σε μια εικόνα σε προγράμματα επεξεργασίας γραφικών και, στη συνέχεια, τοποθετούν την εικόνα με το κείμενο σε έγγραφα html. Τι γίνεται όμως αν το κείμενο πρέπει να αντικατασταθεί; Να ξανασχεδιάσετε την εικόνα; Υπάρχουν απλούστερες λύσεις.

Ως αποτέλεσμα παίρνουμε:

Όλα ήταν καλυμμένα με λευκό χιόνι: και δέντρα και σπίτια, ένας ελαφρύς άνεμος σφύριξε: «Γεια σου, χειμώνα-χειμώνα!»

Η ουσία της μεθόδου που παρουσιάζεται είναι ότι φτιάχνουμε ένα δοχείο div που θα περιέχει μια εικόνα και κείμενο. Σε αυτήν την περίπτωση, θα τοποθετήσουμε το κείμενο σε σχέση με την κάτω αριστερή γωνία του κοντέινερ.

Κώδικας HTML:

Όλα ήταν καλυμμένα με λευκό χιόνι: και δέντρα και σπίτια, ένας ελαφρύς άνεμος σφύριξε: «Γεια σου, χειμώνα-χειμώνα!»

κώδικας css:

.container ( display:inline-block; position:relative; ) .container div ( display: inline-block; position: absolute; bottom: 10px; left: 0px; background-color: rgba(0,0,0,.4 padding: 5px 5px 10px χρώμα: λευκό )

• εμφάνιση: inline-block - χρειαζόμαστε το κοντέινερ να μην εκτείνεται σε όλο το πλάτος ολόκληρης της σελίδας.
• θέση: σχετική - αναγκάζει όλα τα ένθετα μπλοκ με θέση: απόλυτη να μετρήσουν τις συντεταγμένες της θέσης τους όχι από το παράθυρο του προγράμματος περιήγησης, αλλά από το block.container

• εμφάνιση: inline-block - ώστε να μπορούν να εφαρμοστούν στο κείμενό μας στυλ που σχετίζονται με στοιχεία μπλοκ.
• θέση: απόλυτη - για να τοποθετήσετε ένα μπλοκ χρησιμοποιώντας συγκεκριμένες συντεταγμένες: κάτω, αριστερά - κάτω και αριστερή εσοχές (συντεταγμένες) μπορείτε να χρησιμοποιήσετε επάνω και δεξιά αντί για αυτές

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

Η μέθοδος που φαίνεται παραπάνω μπορεί να χρησιμοποιηθεί για την εμφάνιση κειμένου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια εικόνα με το ποντίκι (μπορεί να είναι χρήσιμη για την περιγραφή προϊόντων σε ένα ηλεκτρονικό κατάστημα).

Διαβάστε επίσης

• βίντεο

  Πραγματοποίηση (επιτυχής) δοκιμών στο Seosprint Seosprint πώς να απαντάτε σε ερωτήσεις κατά την εγγραφή

• βίντεο

  Παιδικό ρολόι τηλέφωνο xiaomi

• Προγράμματα περιήγησης

  Υποκατάστημα Sverdlovsk της OJSC "EnergosbyT Plus" (OJSC "Sverdlovenergosbyt")

• παράθυρα 8

  Πώς να προωθήσετε μια ομάδα VKontakte;

• Προγράμματα

  Χρησιμοποιώντας το μενού Qiuck Ball

προτείνω μου αρέσει ΤΑΞΗ! Τιτίβισμα Καρφιτσώστε το!

έντυπη έκδοση