Heim  >  Artikel  >  Web-Frontend  >  So legen Sie den Bildhintergrund mit CSS fest

So legen Sie den Bildhintergrund mit CSS fest

青灯夜游
青灯夜游Original
2021-04-20 16:42:0932517Durchsuche

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>

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);

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;

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>

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn