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
Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats
Im Allgemeinen wird während des Entwicklungsproze...
Eine kurze Diskussion über einige Vorteile von Vue3
Inhaltsverzeichnis 1. Quellcode 1.1 Monorepo 1.2 ...
JavaScript, um einen Lotterieeffekt zu erzielen
In diesem Artikel wird der spezifische JavaScript...
Erste Schritte mit SELinux
Bereits zu Kernel 2.6-Zeiten wurde ein neues Sich...
JavaScript zur Implementierung eines Sprachwarteschlangensystems
Inhaltsverzeichnis einführen Hauptmerkmale Effekt...
Detaillierte Erläuterung zweier Methoden zum Festlegen globaler Variablen und Sitzungsvariablen in MySQL
1. Es gibt zwei Möglichkeiten, globale Variablen ...
Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern
1. Berechnete Eigenschaften und Listener 1.1 Bere...
Warum wird deine Like-Aussage nicht indexiert?
Vorwort Dieser Artikel zielt darauf ab, die langw...
Lassen Sie uns im Detail darüber sprechen, wie der NodeJS-Prozess beendet wird
Inhaltsverzeichnis Vorwort Aktiver Rückzug Ausnah...
Vue Element Front-End-Anwendungsentwicklung, dynamische Menü- und Routing-Assoziationsverarbeitung
Inhaltsverzeichnis Überblick 1. Menü- und Routing...
Vue implementiert den Anwesenheitskalender von DingTalk
In diesem Artikel wird der spezifische Code von V...
Detailliertes Beispiel zum Ändern des Linux-Kontokennworts
Passwort des persönlichen Kontos ändern Wenn norm...
React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen
Ein sehr häufiges Szenario in react -Projekten: c...
Mysql-Operation zum Abrufen von Tabellenkommentarfeldern
Ich werde nicht viel Unsinn erzählen, schauen wir...
Vue3 setup() - Erweiterte Verwendungsbeispiele - ausführliche Erklärung
Inhaltsverzeichnis 1. Unterschiede zwischen Optio...