Erweiterte Verwendung von Hintergrundanhängen in CSS
Dieses Mal werde ich Ihnen die erweiterte Verwendungsmethode von Hintergrundanhängen von CSS vorstellen und welche Vorsichtsmaßnahmen bei der Verwendung von Hintergrundanhängen von CSS gelten Schauen Sie einmal vorbei.
Die Voraussetzung besteht darin, das AttributHintergrundbild zu definieren und dann mithilfe von Hintergrundanhang anzugeben, ob die Position des Hintergrundbilds im Ansichtsfenster festgelegt ist oder sich mit dem enthaltenden Block bewegt. Es kann einfach so verstanden werden, dass definiert wird, wie sich das Hintergrundbild entlang der Bildlaufachse bewegt. Wert:
Scrollen: Standardwert, das Hintergrundbild ist relativ zum Element fixiert und der Hintergrund bewegt sich beim Scrollen der Seite, dh der Hintergrund und der Inhalt sind gebunden.
behoben: Das Hintergrundbild ist relativ zum Ansichtsfenster fixiert, sodass sich der Hintergrund beim Scrollen der Seite nicht bewegt, was dem Festlegen des Hintergrunds auf dem Textkörper entspricht.
lokal: Das Hintergrundbild ist relativ zum Elementinhalt festgelegt,
inhert: Vererbung, nichts zu sagen.
Dieses Attribut kann auf jedes Element angewendet werden.
1. scrollen [Hintergrundbild scrollen] Hintergrundbild festlegen: Das Hintergrundbild wird relativ zum Element selbst verschoben. Der an das Element angehängte Rahmen.
Hinweis:
Beim Scrollen scrollt der Hintergrund im Allgemeinen mit dem Inhalt, es gibt jedoch eine Ausnahme.
Für scrollbare Elemente (Elemente, die auf overflow:scroll eingestellt sind). Wenn der Hintergrundanhang auf Scrollen eingestellt ist, scrollt das Hintergrundbild nicht, wenn der Elementinhalt scrollt.
2. lokal [Scrollendes Element-Hintergrundbild scrollen] Für scrollbare Elemente (Elemente, die auf „overflow:scroll“ eingestellt sind) legen Sie den Hintergrundanhang fest :local, der Hintergrund scrollt, während der Inhalt scrollt.
Da das Hintergrundbild relativ zum Inhalt des Elements selbst positioniert und zunächst fixiert ist, scrollt das Hintergrundbild mit dem Inhalt, nachdem die Bildlaufleiste auf dem Element angezeigt wird.
<style>
p{
width: 200px;
height: 350px;
border: 1px solid red;
background-image: url(img/img_tree.png);
background-repeat: no-repeat;
background-attachment: local;
overflow: scroll;
line-height: 1.5;
}
</style>
<body>
<p>
1内容超出会出现滚动条
2内容超出会出现滚动条
3内容超出会出现滚动条
4内容超出会出现滚动条
5内容超出会出现滚动条
6内容超出会出现滚动条
7内容超出会出现滚动条
8内容超出会出现滚动条
9内容超出会出现滚动条
10内容超出会出现滚动条
11内容超出会出现滚动条
12内容超出会出现滚动条
13内容超出会出现滚动条
14内容超出会出现滚动条
15内容超出会出现滚动条
16内容超出会出现滚动条
17内容超出会出现滚动条
18内容超出会出现滚动条
19内容超出会出现滚动条
20内容超出会出现滚动条
</p>
</body>
3. Behoben: [Hintergrundbild ist still] Das Hintergrundbild ist relativ zum Ansichtsfenster fixiert Das Hintergrundbild bleibt unverändert und bewegt sich auch nicht mit dem Inhalt. Fixed wird wie folgt verwendet:
<style>
body{
background-image: url(img/cartooncat.png);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
height: 1000px;
}
</style>
</head>
<body>
<h1>下拉看效果：</h1>
</body>
Hintergrundanhang mehrerer Hintergrundbilder Sie können den Hintergrundanhang auch für mehrere Hintergrundbilder festlegen
body {
background-image: url("img1.png"), url("img2.png");
background-attachment: scroll, fixed;
}5. Ressourcenlinks
w3c-HintergrundanhangDetails zu Pixeln und Browser-Ansichtsfensterneine Tabelle mit zwei Ansichtsfenstern Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:Detaillierte Erläuterung der Verwendung von Hintergrundanhängen in CSS
Preisliste für Bootstrap-Implementierung
Detaillierte Erläuterung der Verwendung von px, em und rem in CSS
Das obige ist der detaillierte Inhalt vonErweiterte Verwendung von Hintergrundanhängen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Wie verwende ich das DirectX-Reparaturtool? Detaillierte Verwendung des DirectX-Reparaturtools
Mar 15, 2024 am 08:31 AM
Das DirectX-Reparaturtool ist ein professionelles Systemtool. Seine Hauptfunktion besteht darin, den DirectX-Status des aktuellen Systems zu erkennen. Möglicherweise wissen viele Benutzer nicht, wie man das DirectX-Reparaturtool verwendet. Schauen wir uns das ausführliche Tutorial unten an. 1. Verwenden Sie die Reparaturtool-Software, um die Reparaturerkennung durchzuführen. 2. Wenn nach Abschluss der Reparatur angezeigt wird, dass ein ungewöhnliches Problem in der C++-Komponente vorliegt, klicken Sie bitte auf die Schaltfläche „Abbrechen“ und dann auf die Menüleiste „Extras“. 3. Klicken Sie auf die Schaltfläche „Optionen“, wählen Sie die Erweiterung aus und klicken Sie auf die Schaltfläche „Erweiterung starten“. 4. Nachdem die Erweiterung abgeschlossen ist, erkennen und reparieren Sie sie erneut. 5. Wenn das Problem nach Abschluss des Reparaturtoolvorgangs immer noch nicht behoben ist, können Sie versuchen, das Programm, das den Fehler gemeldet hat, zu deinstallieren und erneut zu installieren.
Einführung in den HTTP 525-Statuscode: Erkunden Sie seine Definition und Anwendung
Feb 18, 2024 pm 10:12 PM
Einführung in den HTTP 525-Statuscode: Verstehen Sie seine Definition und Verwendung. Der HTTP (HypertextTransferProtocol) 525-Statuscode bedeutet, dass der Server während des SSL-Handshake-Prozesses einen Fehler hat, was dazu führt, dass keine sichere Verbindung hergestellt werden kann. Der Server gibt diesen Statuscode zurück, wenn beim Transport Layer Security (TLS)-Handshake ein Fehler auftritt. Dieser Statuscode fällt in die Kategorie „Serverfehler“ und weist normalerweise auf ein Serverkonfigurations- oder Einrichtungsproblem hin. Wenn der Client versucht, über HTTPS eine Verbindung zum Server herzustellen, hat der Server keine Verbindung
So verwenden Sie Baidu Netdisk – So verwenden Sie Baidu Netdisk
Mar 04, 2024 pm 09:28 PM
Viele Freunde wissen immer noch nicht, wie man Baidu Netdisk verwendet, daher wird der Herausgeber unten erklären, wie man Baidu Netdisk verwendet. Wenn Sie es brauchen, schauen Sie es sich meiner Meinung nach an. Schritt 1: Melden Sie sich direkt nach der Installation von Baidu Netdisk an (wie im Bild gezeigt); Schritt 2: Wählen Sie dann „Meine Freigabe“ und „Übertragungsliste“ gemäß den Seitenaufforderungen (wie im Bild gezeigt); Friend Sharing“ können Sie Bilder und Dateien direkt mit Freunden teilen (wie im Bild gezeigt); Schritt 4: Wählen Sie dann „Teilen“ und wählen Sie dann Computerdateien oder Netzwerkfestplattendateien aus (wie im Bild gezeigt); Fünfter Schritt 1: Dann können Sie Freunde finden (wie im Bild gezeigt); Schritt 6: Die benötigten Funktionen finden Sie auch in der „Funktionsschatzkiste“ (wie im Bild gezeigt). Das Obige ist die Meinung des Herausgebers
Lernen Sie, schnell zu kopieren und einzufügen
Feb 18, 2024 pm 03:25 PM
So verwenden Sie die Tastenkombinationen zum Kopieren und Einfügen. Kopieren und Einfügen ist ein Vorgang, auf den wir bei der täglichen Verwendung von Computern häufig stoßen. Um die Arbeitseffizienz zu verbessern, ist es sehr wichtig, die Tastenkombinationen zum Kopieren und Einfügen zu beherrschen. In diesem Artikel werden einige häufig verwendete Tastenkombinationen zum Kopieren und Einfügen vorgestellt, um den Lesern dabei zu helfen, Kopier- und Einfügevorgänge bequemer durchzuführen. Tastenkombination zum Kopieren: Strg+Strg+C ist die Tastenkombination zum Kopieren. Durch Gedrückthalten der Strg-Taste und anschließendes Drücken der C-Taste können Sie den ausgewählten Text, die Dateien, Bilder usw. in die Zwischenablage kopieren. Um diese Tastenkombination zu verwenden,
Mar 18, 2024 am 11:07 AM
Das KMS Activation Tool ist ein Softwaretool zur Aktivierung von Microsoft Windows- und Office-Produkten. KMS ist die Abkürzung für KeyManagementService, einen Schlüsselverwaltungsdienst. Das KMS-Aktivierungstool simuliert die Funktionen des KMS-Servers, sodass der Computer eine Verbindung zum virtuellen KMS-Server herstellen kann, um Windows- und Office-Produkte zu aktivieren. Das KMS-Aktivierungstool ist klein und leistungsstark und kann mit einem Klick dauerhaft aktiviert werden. Es kann jede Version des Windows-Systems und jede Version der Office-Software aktivieren, ohne dass eine Verbindung zum Internet besteht und häufig aktualisiertes Windows-Aktivierungstool. Heute werde ich es Ihnen vorstellen. Lassen Sie mich Ihnen die kms-Aktivierungsarbeit vorstellen
So verwenden Sie die Win10-Eingabeaufforderung korrekt, um automatische Reparaturvorgänge durchzuführen
Dec 30, 2023 pm 03:17 PM
Je länger der Computer verwendet wird, desto wahrscheinlicher ist eine Fehlfunktion. Zu diesem Zeitpunkt müssen Freunde ihre eigenen Methoden anwenden, um das Problem zu beheben. Heute präsentiere ich Ihnen ein Tutorial zur Reparatur mithilfe der Eingabeaufforderung. So verwenden Sie die Eingabeaufforderung für die automatische Reparatur von Win10: 1. Drücken Sie „Win+R“ und geben Sie cmd ein, um die „Eingabeaufforderung“ zu öffnen. 2. Geben Sie chkdsk ein, um den Reparaturbefehl anzuzeigen. 3. Wenn Sie andere Orte anzeigen müssen, können Sie diese auch hinzufügen andere Partitionen wie „d“ 4. Geben Sie den Ausführungsbefehl chkdskd:/F ein. 5. Wenn diese während des Änderungsvorgangs belegt ist, können Sie Y eingeben, um fortzufahren.
So verbinden Sie Zellen mithilfe von Tastenkombinationen
Feb 26, 2024 am 10:27 AM
So verwenden Sie die Tastenkombinationen zum Zusammenführen von Zellen In der täglichen Arbeit müssen wir häufig Tabellen bearbeiten und formatieren. Das Zusammenführen von Zellen ist ein gängiger Vorgang, mit dem mehrere benachbarte Zellen zu einer Zelle zusammengeführt werden können, um die Schönheit der Tabelle und den Effekt der Informationsanzeige zu verbessern. In gängigen Tabellenkalkulationsprogrammen wie Microsoft Excel und Google Sheets ist das Zusammenführen von Zellen sehr einfach und kann über Tastenkombinationen erfolgen. Im Folgenden wird die Verwendung von Tastenkombinationen zum Zusammenführen von Zellen in diesen beiden Programmen vorgestellt. existieren
So verwenden Sie Potplayer – So verwenden Sie Potplayer
Mar 04, 2024 pm 06:10 PM
Potplayer ist ein sehr leistungsfähiger Mediaplayer, aber viele Freunde wissen immer noch nicht, wie man Potplayer verwendet. Heute werde ich die Verwendung von Potplayer im Detail vorstellen und hoffe, allen zu helfen. 1. PotPlayer-Tastenkombinationen Die standardmäßigen Tastenkombinationen für den PotPlayer-Player sind wie folgt: (1) Wiedergabe/Pause: Leertaste (2) Lautstärke: Mausrad, Pfeiltasten nach oben und unten (3) Vorwärts/Rückwärts: Pfeil nach links und rechts Tasten (4) Lesezeichen: P- Lesezeichen hinzufügen, H-View-Lesezeichen (5) Vollbild/Wiederherstellen: Eingabe (6) Geschwindigkeit: C-Beschleunigung, 7) Vorheriges/nächstes Bild: D/
