Diskussion zu Bildpfadproblemen in CSS (dasselbe Paket/anderes Paket)
|
In CSS-Dateien müssen Sie manchmal einen Hintergrund verwenden, also ein Hintergrundbild hinzufügen, das im Allgemeinen beim Erstellen von Schaltflächenstilen verwendet wird. Das Hinzufügen von Hintergrundbildern in CSS kann je nach der relativen Position des Bildes und der CSS-Datei in die folgenden Typen unterteilt werden: 1. Im selben Paket: Hintergrund: url(aaa.gif); 2. Verschiedene Pakete: In diesem Fall gibt es zwei Möglichkeiten, dies festzulegen. Eine besteht darin, einen absoluten Pfad zu verwenden, d. h. upload/2022/web/www.iteye.com, dies wird jedoch im Allgemeinen nicht empfohlen und ist für die Projektmigration nicht förderlich. Die andere besteht darin, einen relativen Pfad zu verwenden. Zuerst müssen Sie ein gemeinsames Stammverzeichnis für die Bilddatei und die CSS-Datei finden und dann das Unterverzeichnis des Bildes hinzufügen, zum Beispiel: Speicherort der CSS-Datei: WebRoot/test/css/a.css Speicherort der Bilddatei: WebRoot/platform/resource/images/icons/a.gif Wenn Sie das gemeinsame Stammverzeichnis suchen möchten, müssen Sie „../“ verwenden. Dieser Pfad bezeichnet das übergeordnete Verzeichnis. Wenn es zwei übergeordnete Verzeichnisse gibt, lautet er „../../“. Gemäß dieser Schreibmethode sollte das Hintergrundbild-CSS in a.css dann wie folgt geschrieben werden: Code kopieren Der Code lautet wie folgt:Hintergrund:URL(../../Plattform/Ressource/Bilder/Symbole/a.gif) Warum? Zuerst beobachten wir den Speicherort dieser beiden Dateien und stellen fest, dass das gemeinsame Stammverzeichnis WebRoot ist. Wir finden zuerst den WebRoot am Speicherort von a.css, also haben wir „../../“ und dann ist der Pfad des Unterverzeichnisses des gespleißten Bildes „platform/resource/images/icons/a.gif“. Wenn wir sie zusammenfügen, erhalten wir das obige Ergebnis. |
<<: Detaillierte Erklärung der HTML-Style-Tags und der zugehörigen CSS-Referenzen
>>: Detaillierte Erklärung gängiger Vorlagenbefehle in docker-compose.yml-Dateien
Artikel empfehlen
Detaillierte Erklärung zum Erstellen geplanter MySql-Aufgaben in Navicat
Detaillierte Erklärung zum Erstellen geplanter My...
Tutorial-Diagramm zum Erstellen eines Hadoop-Hochverfügbarkeitsclusters basierend auf ZooKeeper
Inhaltsverzeichnis 1. Einführung in Hochverfügbar...
So implementieren Sie die JavaScript-Ausgabe der Fibonacci-Folge
Inhaltsverzeichnis Thema analysieren Basislösung ...
Lösung zum Vergessen des MySQL-Datenbankkennworts unter MAC
Schnelle Lösung zum Vergessen des MySQL-Datenbank...
Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung
URL: http://hostname.com/contextPath/servletPath/...
Lösung für den MySQL-Fehler „Jede abgeleitete Tabelle muss einen eigenen Alias haben“
MySQL meldet einen Fehler beim Ausführen einer Ab...
Tutorial zur MySQL-Infrastruktur: Detaillierte Erläuterung des Ausführungsprozesses von Abfrageanweisungen
Vorwort Ich wollte schon immer wissen, wie eine S...
Detaillierte Erklärung des Unterschieds zwischen dem JavaScript-Spread-Operator und dem Rest-Operator
Inhaltsverzeichnis Was ist der Restoperator? Wie ...
Ein grafisches Tutorial zur Installation des Redhat 8.0-Systems (ein Muss für Anfänger)
Inhaltsverzeichnis 1. Einleitung 2. Installation ...
Einführung in die Erstellung von Linux-Benutzerskripten/Ratespiel/Überwachung des Netzwerkkartenverkehrs
Inhaltsverzeichnis 1. Vom Benutzer erstelltes Skr...
Eine kurze Diskussion über die Semantik von HTML und einige einfache Optimierungen
1. Was ist Semantisierung? Erklärung zum Bing-Wör...
js implementiert eine einfache dreistufige Auswahlkaskade für Provinzen, Gemeinden und Bezirke
In diesem Artikel wird der spezifische Code von j...
Wird die Tabelle durch ein Update in einer MySQL-Transaktion gesperrt?
Zwei Fälle: 1. Mit Index 2. Ohne Index Voraussetz...
So verwenden Sie Watch-Listener in Vue2 und Vue3
watch : auf Datenänderungen achten (Änderungserei...
Das jQuery-Framework implementiert drei Animationsmethoden zum Anzeigen und Ausblenden von Elementen
Inhaltsverzeichnis 1. Standardmäßig anzeigen und ...