CSS multiple backgrounds

In this chapter, you will learn how to add multiple background images to an element.

You will also learn the following properties:

  • background-size
  • background-origin
  • background-clip

CSS multiple backgrounds

CSS allows you to use background-image The property adds multiple background images to an element.

Different background images are separated by commas, and they stack on top of each other, with the first image closest to the viewer.

The following example has two background images: the first image is a flower (aligned with the bottom and right), and the second image is a paper background (aligned with the top left):

παράδειγμα

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Δοκιμάστε το Εκπρόσωπο

Multiple background images can be specified using a separate background property (as described above) or background abbreviated properties to specify.

The following example uses background Abbreviated properties (results are the same as the previous example):

παράδειγμα

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Δοκιμάστε το Εκπρόσωπο

CSS Background Size

CSS background-size Η ιδιότητα επιτρέπει τη ρύθμιση του μεγέθους της εικόνας φόντου.

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

Το παρακάτω παράδειγμα μειώνει το μέγεθος της εικόνας φόντου σε πολύ μικρότερο μέγεθος (σε pixel):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Αυτό είναι το κώδικας:

παράδειγμα

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Δοκιμάστε το Εκπρόσωπο

background-size οι άλλες δύο πιθανές τιμές είναι contain και cover.

contain για να επεκτείνουν την εικόνα φόντου σε όσο το δυνατόν μεγαλύτερο μέγεθος (αλλά η πλάτη και η ύψος πρέπει να ταιριάζουν στην περιοχή περιεχομένου). Ανάλογα με το πλάτος και το ύψος της εικόνας φόντου και της περιοχής τοποθέτησης φόντου, μπορεί να υπάρχουν περιοχές φόντου που δεν καλύπτονται από την εικόνα φόντου.

cover για να επεκτείνουν την εικόνα φόντου ώστε να καλύπτει πλήρως την περιοχή περιεχομένου (η πλάτη και η ύψος της πρέπει να είναι ίση ή μεγαλύτερη από την περιοχή περιεχομένου). Σε αυτή την περίπτωση, μερικές περιοχές της εικόνας φόντου μπορεί να μην είναι ορατές στην περιοχή τοποθέτησης φόντου.

οι παρακάτω παραδείγματα δείχνουν contain και cover Η χρήση του:

παράδειγμα

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Δοκιμάστε το Εκπρόσωπο

Ορισμός μεγέθους πολλαπλών φόντων εικόνων

Κατά τη διαχείριση πολλαπλών φόντων:background-size Η ιδιότητα μπορεί να δεχτεί πολλαπλές τιμές ρύθμισης μεγέθους φόντου (λίστα διαχωρισμένη με κόμματα).

Η παρακάτω παράδειγμα καθορίζει τρία φόντα εικόνων, κάθε εικόνα έχει διαφορετικό τιμή background-size:

παράδειγμα

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat,; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Δοκιμάστε το Εκπρόσωπο

πλήρες μέγεθος εικόνας παρασκήνιου

Τώρα, θέλουμε η εικόνα του παρασκήνιου στον ιστότοπο να καλύπτει πάντα το πλήρες παράθυρο του προγράμματος περιήγησης.

οι συγκεκριμένες απαιτήσεις είναι οι εξής:

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

οι παρακάτω παραδείγματα δείχνουν πώς να το επιτύχετε: Χρησιμοποιήστε το στοιχείο <html> (το στοιχείο <html> είναι πάντα τουλάχιστον το ύψος του παραθύρου του προγράμματος περιήγησης). Στη συνέχεια ρυθμίστε το παρασκήνιο ως σταθερό και κεντρικό. Τέλος, χρησιμοποιήστε την ιδιότητα background-size για να ρυθμίσετε το μέγεθος του:

παράδειγμα

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Δοκιμάστε το Εκπρόσωπο

Hero Image

Μπορείτε επίσης να χρησιμοποιήσετε διαφορετικές ιδιότητες παρασκήνιου στο <div> για να δημιουργήσετε Hero Image (με κείμενο μεγάλη εικόνα) και να το τοποθετήσετε στη θέση που θέλετε.

παράδειγμα

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Δοκιμάστε το Εκπρόσωπο

Χαρακτηριστικό background-origin CSS

CSS background-origin η ιδιότητα καθορίζει τη θέση της εικόνας του παρασκήνιου.

η ιδιότητα αυτή αποδέχεται τρεις διαφορετικές τιμές:

  • border-box - η εικόνα του παρασκήνιου ξεκινάει από το πάνω αριστερό μέρος του περιγράμματος
  • padding-box - η εικόνα του παρασκήνιου ξεκινάει από το πάνω αριστερό μέρος του περιθωρίου (προεπιλεγμένο)
  • content-box - η εικόνα του παρασκήνιου ξεκινάει από το πάνω αριστερό μέρος του περιεχομένου

οι παρακάτω παραδείγματα δείχνουν background-origin παραμέτροι:

παράδειγμα

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Δοκιμάστε το Εκπρόσωπο

Χαρακτηριστικό background-clip CSS

CSS background-clip η ιδιότητα καθορίζει την περιοχή σχεδίασης του παρασκήνιου.

η ιδιότητα αυτή αποδέχεται τρεις διαφορετικές τιμές:

  • border-box - το παρασκήνιο σχεδιάζεται μέχρι τα εξωτερικά άκρα της περιγράμματος (προεπιλεγμένο)
  • padding-box - το παρασκήνιο σχεδιάζεται μέχρι τα εξωτερικά άκρα του περιθωρίου
  • content-box - να σχεδιάζεται το παρασκήνιο στο πλαίσιο περιεχομένου

οι παρακάτω παραδείγματα δείχνουν background-clip παραμέτροι:

παράδειγμα

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Δοκιμάστε το Εκπρόσωπο

Προχωρημένα Χαρακτηριστικά Φόντου CSS

Χαρακτηριστικό Περιγραφή
background Σύντομη γραμματοσειρά για τη ρύθμιση όλων των χαρακτηριστικών του φόντου σε μια δήλωση.
background-clip Ορίζει την περιοχή που θα χρωματίζεται το φόντο.
background-image Ορίζει μια εικόνα φόντου για έναν ή περισσότερους στοιχεία.
background-origin Ορίζει τη θέση της εικόνας του φόντου.
background-size Ορίζει το μέγεθος της εικόνας του φόντου.