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
Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse
Warum sind die von Ihnen geschriebenen SQL-Abfrag...
Lösung zum Vergessen des MySQL-Datenbankkennworts unter MAC
Schnelle Lösung zum Vergessen des MySQL-Datenbank...
Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe
1. Grundlegende Einführung in die Linux-Gruppe Un...
Zwei Tools zum Teilen des Bildschirms im Linux-Befehlszeilenterminal
Hier sind zwei Terminal-Split-Screen-Tools: scree...
Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript
Inhaltsverzeichnis 1. Baidu Map API-Zugriff 2. Ve...
Installations-Tutorial für die ZIP-Archivversion von MySQL 5.7
In diesem Artikel finden Sie das Installations-Tu...
Empfehlen Sie eine coole interaktive Website, die von einem Front-End-Ingenieur erstellt wurde
Website-Link: http://strml.net/ Von Samuel Reed T...
8 Tipps für Vue, die Sie nach dem Lesen lernen werden
1. Verwenden Sie immer :key in v-for Die Verwendu...
Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden
Inhaltsverzeichnis Umfeld Zusammenfassung Modul F...
8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden
reduce Methode ist eine Array-Iterationsmethode. ...
Häufige Fragen und Antworten im Vorstellungsgespräch für Stellen als Webdesigner
1. Was sind die Vorlagen für ASP.NET-Webanwendunge...
Praxis und Analyse der geschichteten Verpackung von Docker-Images für Spring Boot (empfohlen)
Inhaltsverzeichnis 1. Bereiten Sie das Springboot...
Detaillierte Erläuterung der Schreibreihenfolge und Ausführungsreihenfolge von SQL-Abfrageanweisungen der MySQL-Reihe
Inhaltsverzeichnis 1. Die Schreibreihenfolge eine...
Bild-Tag für HTML-Webseite
Bild-Tag <IMG> einfügen Die farbenfrohen Web...
MySQL implementiert Zeichenfolgenverkettung, Abfangen, Ersetzen und Positionssuchvorgänge
MySQL-Zeichenfolgenverkettung, -Abfangen, -Ersetz...