So verwenden Sie das Hintergrundattribut-CSS-Tutorial-php.cn

So verwenden Sie das Hintergrundattribut

青灯夜游

Freigeben： 2019-02-18 11:21:27

Original

6943 Leute haben es durchsucht

Das Hintergrundattribut ist ein Kurzattribut von CSS. Sie können alle Hintergrundattribute in einer Anweisung festlegen: Hintergrundfarbe, Hintergrundbild, Bildposition, Größe, Positionierungsbereich, Malbereich, wie das Hintergrundbild wiederholt werden soll und ob das Das Hintergrundbild ist fixiert, oder während der Rest der Seite scrollt.

So verwenden Sie das Hintergrundattribut

CSS-Hintergrundattribut

Funktion: Hintergrundabkürzungsattribut Legen Sie alle Hintergrundeigenschaften in einer Anweisung fest.

Grundlegende Syntax:

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;

Nach dem Login kopieren

Parameter:

background-color: Geben Sie die zu verwendende Hintergrundfarbe an.

Hintergrundbild: Geben Sie ein oder mehrere zu verwendende Hintergrundbilder an.

Hintergrundposition: Legen Sie die Position des Hintergrundbilds fest.

Hintergrundgröße: Geben Sie die Größe des Hintergrundbilds an.

Hintergrundwiederholung: Gibt an, wie das Hintergrundbild wiederholt werden soll.

Hintergrundursprung: Geben Sie den Positionierungsbereich des Hintergrundbilds an.

background-clip gibt den Zeichenbereich des Hintergrundbilds an.

Hintergrundanhang: Legen Sie fest, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.

Hinweis: IE8 und frühere Browser unterstützen nicht mehrere Hintergrundbilder für ein Element.

Hinweis: Es spielt keine Rolle, wenn einer der oben genannten Werte fehlt, zum Beispiel: Sie können nur das Hintergrundbild festlegen, Hintergrund: url('smiley.gif' ) no-repeat;

Beispiel für die Verwendung des CSS-Hintergrundattributs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8"> 
<style>
body
{ 
background: #00ff00 url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a208c1ad5b114.gif&#39;) no-repeat fixed center; 
}
</style>
</head>
<body>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
</body>
</html>

Nach dem Login kopieren

Rendering:

So verwenden Sie das Hintergrundattribut

Referenz für diesen Artikel: https://www.html.cn/book/css/properties/background/background.htm

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Hintergrundattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!