Hintergrundbild (CSS-Eigenschaft)

Beschreibung

Diese Eigenschaft legt das Hintergrundbild eines Elements über den angegebenen URI fest. Das Bild befindet sich auf der Hintergrundfarbe, und wenn das Bild undurchsichtig ist, ist die Hintergrundfarbe nicht darunter nicht sichtbar. Wenn Sie ein Hintergrundbild festlegen, legen Sie nach Möglichkeit auch eine Hintergrundfarbe fest, falls das Bild nicht verfügbar ist. Der Hintergrund eines Elements ist der Bereich, der durch die Breite und die Höhe dieses Elements bedeckt ist (ob diese Dimensionen explizit eingestellt werden oder der Inhalt sie bestimmt); Es umfasst auch den Bereich, der von Polsterung und Grenzen bedeckt ist. Eine Hintergrundfarbe (oder ein Hintergrundbild), das auf ein Element angewendet wird, erscheint unter dem Vordergrundgehalt dieses Elements, und der Bereich, der von den Polsterung und den Grenzeigenschaften für das Element abgedeckt wird. Dieser Abdeckungsbereich ist offensichtlich, wenn ein Element transparent (oder gepunktet ist oder gestrichelte) Grenzen, und der Hintergrund ist unter den Grenzen (oder zwischen den Punkten) zu sehen. Beachten Sie, dass Internet Explorer -Versionen bis hin zu 6 transparenten Grenzen nicht unterstützen. Ein Bereich des fraglichen Elements muss sichtbar sein, damit das Hintergrundbild durchliegen kann. Wenn das Element keine intrinsische Höhe hat (entweder durch seinen Inhalt oder seine Abmessungen definiert), hat der Hintergrund keinen Platz, in dem angezeigt wird. Wenn ein Element nur schwebende Kinder enthält, die nicht gelöscht wurden - siehe klar -, wird der Hintergrund nicht angezeigt, da die Höhe des Elements Null ist. Standardmäßig wird das Hintergrundbild am oberen linken (Hintergrundposition) des Elements platziert; Es wird entlang der X- und Y-Achsen (Hintergrund-Wiederholung) wiederholt und wird mit dem Dokument scrollen. Dies sind die Standardeinstellungen, die gelten, wenn Sie keine anderen eingestellt haben und mit den anderen Hintergrundeigenschaften angepasst werden können. In den anderen relevanten Dingen finden Sie Methoden, mit denen Sie das Bild positionieren und steuern können.

Beispiel

Diese Stilregel weist einen Hintergrund zu Bild zum Element mit ID "Beispiel":

#example {
  background-image:
  ➥    url(images/bg.gif);
}

Wert

Ein URI -Wert Gibt einen Ort an, an dem das Bild gefunden werden kann. Der Wert None stellt sicher, dass kein Hintergrundbild angezeigt wird. Dies ist die Standardeinstellung, sodass Sie sie nicht explizit definieren müssen, es sei denn, Sie möchten frühere Erkenntnisse im Hintergrund-Image überschreiben. Der Wert, der inerit ist, würde dazu führen, dass das Element das Hintergrundbild seines Elternteils erben. Dieser Ansatz würde normalerweise nicht verfolgt, da das ererbte Hintergrundbild des Elements höchstwahrscheinlich das Bild des Elternteils überlappen würde. In den meisten Fällen ist das Hintergrundbild des Elternteils durch den transparenten Hintergrund des Elements sichtbar, es sei denn, es wurde ein anderes Hintergrundbild oder eine Hintergrundfarbe festgelegt.

häufig gestellte Fragen (FAQs) zu CSS -Hintergrundbild

Wie kann ich ein Hintergrundbild festlegen, um das gesamte Element in CSS abzudecken? . Dies skaliert das Bild so groß wie möglich, um den Container zu füllen und gleichzeitig das Seitenverhältnis beizubehalten. Hier ist ein Beispiel:

Body {
Hintergrund-Image: url ('image.jpg');
Hintergrundgröße: Cover; Der gesamte Körper der Webseite.

Wie kann ich ein Hintergrundbild in CSS positionieren? Bild. Sie können die Position in Prozentsätzen, Pixeln oder Schlüsselwörtern wie "oben", "unten", "links", "rechts", "zentrum" angeben. Hier ist ein Beispiel:

Body {

Hintergrundbild: url ('image.jpg'); In der oberen rechten Ecke des Körpers.

Wie kann ich ein Hintergrundbild in CSS wiederholen? Wiederholung eines Hintergrundbildes. Die Werte können "wiederholen", "wiederholen-X", "Wiederholung" oder "No-Repeat" sein. Hier ist ein Beispiel:

Body {
Hintergrund-Image: url ('image.jpg'); Bild horizontal über den Körper.

Wie kann ich mehrere Hintergrundbilder in CSS festlegen? Bild in der Eigenschaft „Hintergrundbild“, getrennt durch Kommas. Das erste Bild in der Liste ist die oberste Ebene. Hier ist ein Beispiel:

Body {

Hintergrund-Image: url ('image1.jpg'), url ('image2.jpg');

}

Dies setzt zwei Hintergrundbilder Für den Körper. Bild behoben, so dass es nicht mit dem Rest der Seite scrollt. Hier ist ein Beispiel:

Body {
Hintergrund-Image: url ('image.jpg'); behoben.

Wie kann ich ein Hintergrundbild von einer externen URL in CSS festlegen? Hier ist ein Beispiel:

Body {
Hintergrund-Image: url ('https://example.com/image.jpg');
}
Dies setzt das Hintergrundbild aus Die angegebene URL.

Wie kann ich eine Fallback -Farbe für ein Hintergrundbild in CSS festlegen? Angabe der Farbe in der Eigenschaft „Hintergrundfarbe“. Diese Farbe wird angezeigt, wenn das Hintergrundbild nicht geladen werden kann. Hier ist ein Beispiel:

Body {

Hintergrund-Image: url ('image.jpg'); Fallback-Farbe für das Hintergrundbild.

Wie kann ich ein Hintergrundbild mit einer Hintergrundfarbe in CSS mischen? Mit CSS können Sie ein Hintergrundbild mit einer Hintergrundfarbe mischen. Hier ist ein Beispiel:

Body {
Hintergrund-Image: url ('image.jpg'); 🎜>}
Dies mischt das Hintergrundbild mit der roten Hintergrundfarbe mit dem Multiplikationsmischmodus mit der roten Hintergrundfarbe. CSS? Hier ist ein Beispiel:

#myelement {

Hintergrund-Image: URL ('Image.jpg'); '.

Wie kann ich ein Hintergrundbild für ein Pseudo-Element in CSS festlegen?

Sie können ein Hintergrundbild für a festlegen Pseudoelement durch Angabe des Pseudo-Element-Selektors vor der Eigenschaft „Hintergrundbild“. Hier ist ein Beispiel:

div :: vor {
Inhalt: "";
Hintergrund-Image: url ('image.jpg'); Hintergrundbild für das ':: vor' Pseudoelement des 'Div' Elements.

Das obige ist der detaillierte Inhalt vonHintergrundbild (CSS-Eigenschaft). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!