Heim > Artikel > Web-Frontend > So legen Sie ein Hintergrundbild in CSS fest
So legen Sie ein Hintergrundbild in CSS fest
- 青灯夜游Original
- 2021-03-22 11:39:1316644Durchsuche
In CSS können Sie das Attribut „Hintergrund“ oder „Hintergrundbild“ verwenden, um das Hintergrundbild festzulegen. Das spezifische Syntaxformat ist „Hintergrundbild:URL('Bild-URL');“ );" .
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In CSS können Sie das Hintergrundbild mit dem Attribut „Hintergrund“ oder „Hintergrundbild“ festlegen. Das Attribut
background-image legt das Hintergrundbild eines Elements fest. Das Syntaxformat lautet wie folgt:
background-image:url('URL');
Und das Hintergrundattribut ist ein Kurzattribut, um alle Hintergrundattribute in einer Anweisung festzulegen. Folgende Eigenschaften können festgelegt werden:
Hintergrundfarbe: Geben Sie die zu verwendende Hintergrundfarbe an.
Hintergrundposition: Geben Sie die Position des Hintergrundbilds an.
Hintergrundgröße: Geben Sie die Größe an das Hintergrundbild
-
background-repeat: Geben Sie an, wie das Hintergrundbild wiederholt werden soll.
background-origin: Geben Sie den Positionierungsbereich des Hintergrundbilds an.
background-clip: Geben Sie den Malbereich von an das Hintergrundbild
background-attachment: Legen Sie fest, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.
Hintergrundbild: Geben Sie ein oder mehrere zu verwendende Hintergrundbilder an
[Empfohlenes Tutorial: CSS-Video-Tutorial]
Beispiel: Hintergrundbild festlegen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background-image:url('paper.gif');
background-color:#cccccc;
/*background:#cccccc url('paper.gif');*/
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Rendering:
Für mehr Programmierkenntnisse finden Sie unter: Programmiervideos! !
Das obige ist der detaillierte Inhalt vonSo legen Sie ein Hintergrundbild in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie verwende ich CSS, um einen Bildkarusselleffekt zu erzielen? (Codebeispiel)
- Wie erzielt man mit CSS3 einen Meteorschauereffekt? (Codebeispiel)
- Verwenden Sie reines CSS, um den kreisförmigen Navigationsmenüeffekt zu implementieren (Codebeispiel)
- Verwenden Sie reines CSS, um einen einfachen Ladeanimationseffekt zu erzielen (Codebeispiel).
- So erzielen Sie den Effekt abgerundeter Ecken in CSS