CSS πολλαπλά υπόβαθρα

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Σε αυτό το κεφάλαιο θα μάθετε πώς να προσθέτετε πολλές εικόνες φόντου σε ένα στοιχείο.

Θα μάθετε επίσης για τις ακόλουθες ιδιότητες:

background-size
background-origin
background-clip

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

You will also learn about the following properties:

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

CSS πολλαπλά υπόβαθρα

Το CSS σάς επιτρέπει να προσθέσετε πολλές εικόνες φόντου για ένα στοιχείο, μέσω του Ιδιότητα background-image.

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

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

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

Το παρακάτω παράδειγμα χρησιμοποιεί την ιδιότητα συντομογραφίας background (ίδιο αποτέλεσμα με παραπάνω παράδειγμα):

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Μέγεθος φόντου CSS

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

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

Το ακόλουθο παράδειγμα αλλάζει το μέγεθος μιας εικόνας φόντου σε πολύ μικρότερο από την αρχική εικόνα (χρησιμοποιώντας 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;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}

#example2 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<p>Resized background-image:</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>Original size of the background-image:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Οι δύο άλλες πιθανές τιμές για το μέγεθος φόντου είναι

contain
cover

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

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

Το ακόλουθο παράδειγμα επεξηγεί τη χρήση του contain και του εξωφύλλου:

Παράδειγμα

  #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;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

.div2 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

.div3 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">

</body>
</html>

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

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

Το ακόλουθο παράδειγμα έχει καθορισμένες τρεις εικόνες φόντου, με διαφορετικές τιμή μεγέθους φόντου για κάθε εικόνα:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

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

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

Οι απαιτήσεις είναι οι εξής:

  • Συμπληρώστε ολόκληρη τη σελίδα με την εικόνα (χωρίς λευκό διάστημα)

  • Κλίμακα εικόνας όπως απαιτείται

  • Κέντρο εικόνας στη σελίδα

  • Μην προκαλείτε γραμμές κύλισης

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
html { 
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}
</style>
</head>
<body>

<h1>Full Page Background Image</h1>
<p>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.</p>

</body>
</html>

Εικόνα ήρωα

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

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

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button>
  </div>
</div>

<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>

</body>
</html>

Ιδιότητα προέλευσης φόντου CSS

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

Το ακίνητο παίρνει τρεις διαφορετικές τιμές:

  • πλαίσιο-πλαίσιο - η εικόνα φόντου ξεκινά από την επάνω αριστερή γωνία του περιγράμματος

  • padding-box - (προεπιλογή) η εικόνα φόντου ξεκινά από την επάνω αριστερή γωνία της άκρης padding

  • πλαίσιο περιεχομένου - η εικόνα φόντου ξεκινά από την επάνω αριστερή γωνία του περιεχομένου

Το ακόλουθο παράδειγμα επεξηγεί την ιδιότητα background-origin:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}

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

#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<h1>The background-origin Property</h1>

<p>No background-origin (padding-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Ιδιότητα κλιπ φόντου CSS

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

Το ακίνητο παίρνει τρεις διαφορετικές τιμές:

  • πλαίσιο-πλαίσιο - (προεπιλογή) το φόντο είναι ζωγραφισμένο στην εξωτερική άκρη του περιγράμματος

  • padding-box - το φόντο είναι βαμμένο στην εξωτερική άκρη του padding

  • πλαίσιο περιεχομένου - το φόντο είναι ζωγραφισμένο μέσα στο πλαίσιο περιεχομένου

Το ακόλουθο παράδειγμα απεικονίζει την ιδιότητα background-clip:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
}

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

#example3 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}
</style>
</head>
<body>

<h1>The background-clip Property</h1>

<p>No background-clip (border-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

Προηγμένες ιδιότητες φόντου CSS

background

Μια συντομογραφία ιδιότητας για τη ρύθμιση όλων των ιδιοτήτων φόντου σε μια δήλωση

background-clip

Καθορίζει την περιοχή ζωγραφικής του φόντου

background-image

Καθορίζει μία ή περισσότερες εικόνες φόντου για ένα στοιχείο

background-origin

Καθορίζει πού θα τοποθετηθούν οι εικόνες φόντου

background-size

Καθορίζει το μέγεθος των εικόνων φόντου