CSS-Praxisbeispiele (empfohlen)_CSS/HTML

Hintergrund Hintergrund Hintergrundfarbe festlegen

<style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> <h1>Dies ist Header 1</h1> <h2>Dies ist Header 2</h2> <p>Dies ist ein Absatz</p>
[Strg+A Alles auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Ein Bild als Hintergrund festlegen

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') } </style>
[Strg+A Alles auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Vertikal wiederholen Hintergrundbild

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style>
[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Horizontales Wiederholungshintergrundbild

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat-x } </style>
[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

So platzieren Sie das Hintergrundbild (Positionsplatzierung)

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: no-repeat; background-position: center; } </style>
[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]

背景不滚动

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p> <p>Das Bild scrollt nicht mit dem Rest der Seite</p>
[Strg+A 全选 注:如需引入外部Js需刷新才能执行]

背景属性一行解决（用一行文字定义背景属性）

<style type="text/css"> body { background: #00ff00 url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center; } </style> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p> <p>Das ist ein Text</p>
[Strg+A 全选 注:如需引入外部Js需刷新才能执行]