Επανάληψη Φόντου CSS

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像仅适合水平或垂直方向重复，否则它们看起来会很奇怪，如下所示：

Παράδειγμα

body {
  background-image: url("gradient_bg.png");
}

Δοκιμάστε το Μαζί Μας

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

Παράδειγμα

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Δοκιμάστε το Μαζί Μας

提示：要垂直重复图像，请设置 background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat Η ιδιότητα μπορεί επίσης να καθορίσει ότι η εικόνα φόντου θα εμφανιστεί μόνο μια φορά:

Παράδειγμα

Η εικόνα φόντου εμφανίζεται μόνο μια φορά:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

Δοκιμάστε το Μαζί Μας

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

CSS background-position

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

Παράδειγμα

Τοποθετήστε την εικόνα φόντου στο δεξί επάνω γωνία:

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

Δοκιμάστε το Μαζί Μας