CSS background σύντομη γραφή

CSS background - σύντομη γραφή

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

αντίθετα από το να γράφετε:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Μπορείτε να χρησιμοποιήσετε τη σύντομη γραφή background:

Παράδειγμα

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

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

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

Η σειρά των τιμών των ιδιοτήτων όταν χρησιμοποιείται η σύντομη γραφή είναι:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Αν λείπει κάποια τιμή τιμής από τη μια τιμή τιμής, δεν είναι σημαντικό, αρκεί να ρυθμίσετε τις υπόλοιπες τιμές σε αυτή την σειρά. Προσέξτε ότι στην παραπάνω παράδειγμα δεν χρησιμοποιήθηκε η ιδιότητα background-attachment, γιατί δεν έχει τιμή.

Όλες οι ιδιότητες φόντου CSS

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