Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie das Hintergrundattribut

青灯夜游
Freigeben: 2019-02-18 11:21:27
Original
6964 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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage