Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

藏色散人
Freigeben: 2020-11-20 11:26:32
Original
4702 Leute haben es durchsucht

So implementieren Sie einen nicht scrollenden CSS-Hintergrund: Erstellen Sie dann ein

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

Empfohlen: „CSS-Video-Tutorial

Öffnen Sie die HTML-Entwicklungssoftware und erstellen Sie eine neue HTML-Codeseite.

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

Geben Sie mehrere Zeilen Absatztext in das Tag

ein, das zum Scrollen mit der Bildlaufleiste beim Anzeigen von Bildern verwendet wird, wenn die Bildlaufleiste des Browsers scrollt. Wie im Bild gezeigt

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

Legen Sie den Hintergrundbildstil fest. Erstellen Sie ein

Style-Code:

body{
background-image: url(img/bg.jpg);
background-repeat:no-repeat;
}
Nach dem Login kopieren

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

Nachdem Sie den HTML-Code gespeichert haben, öffnen Sie ihn mit einem Browser. Zu diesem Zeitpunkt wird beim Scrollen der Browser-Bildlaufleiste festgestellt, dass das Hintergrundbild mit dem Scrollen der Browser-Bildlaufleiste scrollt.

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

Hintergrundanhang verwenden: behoben, um festzulegen, dass das Hintergrundbild nicht mit der Bildlaufleiste scrollt. Gehen Sie zurück zur HTML-Codeseite und fügen Sie „background-attachment: Fixed“ zum Textkörperstil hinzu.

Wie im Bild gezeigt

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

Aktualisieren Sie den Browser, nachdem Sie die HTML-Codeseite gespeichert haben. Wenn Sie zu diesem Zeitpunkt durch die Bildlaufleiste des Browsers scrollen, wird festgestellt, dass das Hintergrundbild repariert wurde und nicht mit dem Scrollen des Browsers gescrollt wird. Als Bild

So erreichen Sie einen nicht scrollenden CSS-Hintergrund

Das obige ist der detaillierte Inhalt vonSo erreichen Sie einen nicht scrollenden CSS-Hintergrund. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!