Πώς μπορώ να τοποθετήσω μια εικόνα πάνω σε μια άλλη στην HTML;

Question

Περισσότερα

Πηγή Μη AMP-έκδοση Επεξεργασία

Πώς μπορώ να τοποθετήσω μια εικόνα πάνω σε μια άλλη στην HTML;

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

Θέλω απλώς να τοποθετήσω τις επικαλυπτόμενες εικόνες σε σχέση μεταξύ τους.

Ως πιο δύσκολο παράδειγμα, φανταστείτε ένα οδόμετρο τοποθετημένο μέσα σε μια μεγαλύτερη εικόνα. Για έξι ψηφία, θα έπρεπε να συνθέσω ένα εκατομμύριο διαφορετικές εικόνες, ή να το κάνω όλο αυτό on the fly, όπου το μόνο που χρειάζεται είναι να τοποθετήσω τις έξι εικόνες πάνω στην άλλη.

computingfreak

Επεξεργασμένη ερώτηση Κάνε Σεπτέμβριος 2016 в 10:49

Προγραμματισμός

graphics html css optimization

Κάνε Σεπτέμβριος 2008 в 2:31

17 προβολές

Espo · Answer 1 · 2008-09-07T14:42:30+00:00

Espo

Πηγή Μη AMP-έκδοση Επεξεργασία

Αυτή είναι μια γυμνή ματιά σε αυτό που έκανα για να επιπλέω μια εικόνα πάνω από μια άλλη.

Nhan

Επεξεργασμένη απάντηση Κάνε Δεκέμβριος 2016 в 11:56

73

0

Σχόλια (1)

buti-oxa · Answer 2 · 2008-09-07T15:37:03+00:00

buti-oxa

Πηγή Μη AMP-έκδοση Επεξεργασία

Εδώ είναι ένας κώδικας που μπορεί να σας δώσει ιδέες:



.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 


<div class="containerdiv">

Community

Επεξεργασμένη απάντηση Κάνε Μάιος 2017 в 11:47

39

0

Σχόλια (1)

Chris Bartow · Answer 3 · 2008-09-07T14:40:21+00:00

Ο εύκολος τρόπος για να το κάνετε είναι να χρησιμοποιήσετε το background-image και στη συνέχεια απλά να βάλετε ένα σε αυτό το στοιχείο.

Ο άλλος τρόπος είναι να χρησιμοποιήσετε τα επίπεδα css. Υπάρχουν πάρα πολλοί διαθέσιμοι πόροι για να σας βοηθήσουν σε αυτό, απλά αναζητήστε css layers.