Heim > Web-Frontend > CSS-Tutorial > So implementieren Sie ein festes Hintergrundbild in CSS

So implementieren Sie ein festes Hintergrundbild in CSS

藏色散人
Freigeben: 2018-12-03 14:34:52
Original
10118 Leute haben es durchsucht

Das sogenannte feste Hintergrundbild bedeutet, dass sich das Hintergrundbild nicht ändert, wenn wir Inhalte auf der Seite eingeben oder die Maus bewegen. Es ist auch sehr einfach, die Hintergrundbildfixierung in CSS zu implementieren. Dazu können wir die hintergrundbezogenen Attribute in CSS verwenden.

So implementieren Sie ein festes Hintergrundbild in CSS

Empfohlene Referenz: „CSS-Tutorial

Dann haben wir es Ihnen im vorherigen Artikel vorgestelltSo erzielen Sie mit CSS einen Hintergrundbildwiederholungseffekt.

Jetzt stellen wir Ihnen weiterhin die Implementierungsmethode der CSS-Hintergrundbildfixierung vor.

Der Code lautet wie folgt:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        body {
            background-image: url("/test/img/154e.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>

</head>
<body>
<p>这里是一行文字:圣诞节快乐!</p>
<p>这里是一行文字:圣诞节快乐!</p>
<p>这里是一行文字:圣诞节快乐!</p>
<p>这里是一行文字:圣诞节快乐!</p>
<p>这里是一行文字:圣诞节快乐!</p>
<p>这里是一行文字:圣诞节快乐!</p>
</body>
</html>
Nach dem Login kopieren

Der Effekt ist wie folgt:

So implementieren Sie ein festes Hintergrundbild in CSS

Hintergrundbezogene Attribute:

background-attachment attribute Legt fest, ob das Hintergrundbild fixiert ist oder mit dem Rest der Seite scrollt. Der Wert „fixed“ bedeutet, dass sich das Hintergrundbild nicht bewegt, wenn der Rest der Seite gescrollt wird.

Hintergrundwiederholungsattribut legt fest, ob und wie das Hintergrundbild wiederholt werden soll.

Dieser Artikel ist eine Einführung in die Methode zum Korrigieren von Hintergrundbildern mit CSS. Er ist einfach und leicht zu verstehen. Ich hoffe, er wird für Freunde in Not hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein festes Hintergrundbild in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage