So legen Sie den Bildhintergrund mit CSS fest-CSS-Tutorial-php.cn

So legen Sie den Bildhintergrund mit CSS fest

青灯夜游

Freigeben： 2023-01-05 16:10:09

Original

32458 Leute haben es durchsucht

So legen Sie den Bildhintergrund mit CSS fest: 1. Verwenden Sie das Attribut „Hintergrundbild“, die Syntax „background-image:url(‘image address‘);“ 2. Verwenden Sie das Attribut „Hintergrund“, die Syntax „background:url“. ('Bildadresse') ;".

So legen Sie den Bildhintergrund mit CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie das Attribut „Hintergrundbild“ oder das Attribut „Hintergrund“ verwenden, um den Bildhintergrund festzulegen.

css-Hintergrundbild-Eigenschaft

Die Hintergrund-Bild-Eigenschaft legt das Hintergrundbild eines Elements fest.

Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Polsterung und Rändern (jedoch nicht der Ränder).

Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich sowohl vertikal als auch horizontal.

Attributwert:

url('URL') Pfad, der auf das Bild zeigt.
kein Standardwert. Es wird kein Hintergrundbild angezeigt.
inherit gibt an, dass die Einstellung der Eigenschaft „Hintergrundbild“ vom übergeordneten Element geerbt werden soll.

Beispiel:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css设置背景图片</title>
		<style>
			body {
				background-image: url(&#39;img/1.jpg&#39;);
			}
		</style>
	</head>

	<body>

	</body>

</html>

Nach dem Login kopieren

Rendering:

So legen Sie den Bildhintergrund mit CSS fest

css-Hintergrundattribut

Das Hintergrundattribut ist ein Attribut, das speziell den Hintergrund festlegt. Es ist ein Kurzattribut, das alle Hintergrundattribute in einer Anweisung festlegen kann. (Teilen von Lernvideos: CSS-Video-Tutorial)

Attribute, die nach Hintergrund festgelegt werden können:

Hintergrundfarbe: Gibt die zu verwendende Hintergrundfarbe an.
Hintergrundposition: Gibt die Position des Hintergrundbilds an.
Hintergrundgröße: Gibt die Größe des Hintergrundbilds an.
background-repeat: Gibt an, wie das Hintergrundbild wiederholt werden soll.
background-origin: Gibt den Positionierungsbereich des Hintergrundbilds an.
background-clip: Gibt den Zeichenbereich des Hintergrunds an.
background-attachment: Gibt an, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.
Hintergrundbild: Gibt das zu verwendende Hintergrundbild an.

Es ist ersichtlich, dass das Hintergrundbildattribut das Hintergrundbildattribut für die HTML-Seite festlegt. Schauen wir uns seine Verwendung an.

background-image:url(1.jpg);

Nach dem Login kopieren

Auf diese Weise geben Sie den Pfad des Bildes in der URL an. ), können Sie einen Hintergrund für das Div-Box-Bild festlegen; es scheint einfach zu sein, aber eine Sache ist zu beachten: Das Feld, in dem das Hintergrundbild festgelegt wird, muss eine beträchtliche Breite und Höhe haben, damit das Hintergrundbild auf dem angezeigt werden kann Anzeige.

Wenn es umständlich erscheint, die oben genannten Hintergrundattribute einzeln festzulegen, können einige Attribute tatsächlich zusammen festgelegt werden. Ein solcher CSS-Hintergrundausdruck kann CSS-Dateicode speichern und optimieren. Beispiel:

background:url(bgimg.gif) no-repeat 5px 5px;

Nach dem Login kopieren

Erklärung wie unten gezeigt:

So legen Sie den Bildhintergrund mit CSS fest

Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片设置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(img/1.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

Nach dem Login kopieren

Rendering:

So legen Sie den Bildhintergrund mit CSS fest

Weitere programmierbezogene Kenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonSo legen Sie den Bildhintergrund mit CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!