Heim > Artikel > Web-Frontend > CSS, wie man ein Hintergrundbild für ein Element festlegt
CSS, wie man ein Hintergrundbild für ein Element festlegt
- 醉折花枝作酒筹Original
- 2021-08-13 10:45:022125Durchsuche
Im vorherigen Artikel haben wir die Methode zum Festlegen des Hintergrund-Zeichenbereichs kennengelernt. Weitere Informationen finden Sie unter „CSS geschickt zum Festlegen des Hintergrund-Zeichenbereichs verwenden“. Dieses Mal schauen wir uns an, wie man ein Hintergrundbild für ein Element festlegt. Sie können bei Bedarf darauf zurückgreifen.
Wie sollen wir das machen, wenn wir ein Bild als Hintergrund für ein Element verwenden möchten?
Schauen wir uns ein kleines Beispiel an.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: url("images/2.jpg");
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>
</html>Das Ergebnis dieses kleinen Beispiels ist
Sie können sehen, dass das Bild, das uns gefällt, zum Hintergrund des Elements wird. Dies liegt daran, dass wir das Attribut background-image verwenden. background-image这个属性。
我们来看看这个属性吧。
background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
温馨提示：
请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip 和 background-origin
Werfen wir einen Blick auf diese Immobilie.
Das Attribut „Hintergrundbild“ legt das Hintergrundbild für das Element fest. Der Hintergrund eines Elements nimmt die gesamte Größe des Elements ein, einschließlich Polsterung und Rändern, jedoch keine Ränder. Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich horizontal und vertikal. Warme Tipps:
🎜🎜 Bitte legen Sie eine verfügbare Hintergrundfarbe fest, damit die Seite auch dann gute visuelle Effekte erzielen kann, wenn das Hintergrundbild nicht verfügbar ist. 🎜🎜Beim Zeichnen werden Bilder in Z-Richtung gestapelt. Das zuerst angegebene Bild wird über dem später angegebenen Bild gezeichnet. Das erste angegebene Bild ist also „dem Benutzer am nächsten“. 🎜🎜Dann wird der Rand des Elements darüber gezeichnet undbackground-color wird darunter gezeichnet. Die Beziehung zwischen der Zeichnung des Bildes, der Box und dem Rand der Box muss in den CSS-Eigenschaften background-clip und background-origin definiert werden. 🎜🎜Wenn ein angegebenes Bild nicht gezeichnet werden kann (z. B. kann die durch den angegebenen URI dargestellte Datei nicht geladen werden), behandelt der Browser diese Situation, als ob sein Wert auf „Keine“ gesetzt wäre. 🎜🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜Das obige ist der detaillierte Inhalt vonCSS, wie man ein Hintergrundbild für ein Element festlegt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!