Wie kachele ich ein CSS-Hintergrundbild?

Beim Webseitenlayout konnte in der Vergangenheit ein Div nur ein Hintergrundbild festlegen. Wenn mehrere Hintergründe festgelegt wurden, mussten mehrere Divs verschachtelt werden, um eine bessere Kompatibilität zu erreichen. Wenn Ihre Website Kompatibilität mit niedrigeren Browserversionen erfordert, wird die Verwendung dieser Methode empfohlen. Das Aufkommen von CSS3 löst das Problem, dass ein Div nur einen Hintergrund festlegen kann, sodass ein Div mehrere Hintergrundbilder festlegen kann. Hintergrundbild kann auch lineare Verläufe und andere Effekte festlegen.

Was den Hintergrund von CSS3 betrifft, ist es sehr leistungsfähig und verfügt über viele Attribute, wie z. B. Hintergrundgröße und so weiter. Sie können einen Blog über diese Attribute schreiben. Was andere Eigenschaften von css3background betrifft, werde ich später separat darüber bloggen!

CSS3/CSS1-Hintergrundbildattribut

Syntax:

background-image：<bg-image> [ , <bg-image> ]
*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

Standardwert: keiner

Wert:

kein: Kein Hintergrundbild.

< URL >: Geben Sie ein Hintergrundbild mit einer absoluten oder relativen Adresse an.

< linearer Farbverlauf>: Erstellen Sie ein Hintergrundbild mit einem linearen Farbverlauf. (CSS3)

< radial-gradient>: Erstellen Sie ein Hintergrundbild mit einem radialen (radialen) Farbverlauf. (CSS3)

< Repeating-Linear-Gradient>: Erstellen Sie ein Hintergrundbild mit einem sich wiederholenden linearen Farbverlauf. (CSS3)

< Repeating-Radial-Gradient>: Erstellen Sie ein Hintergrundbild mit einem sich wiederholenden Radialverlauf. (CSS3)

Beschreibung:

legt das Hintergrundbild des -Objekts fest oder ruft es ab.

Wenn ein Hintergrundbild festgelegt ist, empfiehlt es sich auch, dass der Autor die Hintergrundfarbe festlegt, um einen gewissen Kontrast zum Text aufrechtzuerhalten, wenn das Hintergrundbild unsichtbar ist. Die entsprechende Skriptfunktion von

ist backgroundImage.

So strecken Sie das Hintergrundbild, um den Bildschirm in CSS auszufüllen

Der CSS-Code, den ich geschrieben habe, ist

#bg
{
width: 100%;
height: 100%;
background:url(images/beijing.png);
}

Auf diese Weise wird das wiederholt Wenn das Bild den Bildschirm ausfüllt, möchte ich, dass er das Bild so weit ausdehnt, dass es den Bildschirm abdeckt. Wie soll ich es schreiben?

background:url(images/beijing.png) repeat;

Attribut hinzufügen

background-size:100%;background:url(images/beijing.png) no-repeat;

Attribut hinzufügen background-size:100%;background:url(images/beijing.png) no-repeat ; Das Bild wird verzerrt!

Entweder ist der äußere Rahmen begrenzt, ich habe ihn hier getestet und er ist voll. Sie können sehen, ob es andere Attribute gibt, die ihn beeinflussen.

Das obige ist der detaillierte Inhalt vonWie kachele ich ein CSS-Hintergrundbild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!