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

So implementieren Sie den Vue-Mausrad-Scrolling-Umschalt-Routing-Effekt

Diskussion zu Bildpfadproblemen in CSS (dasselbe Paket/anderes Paket)

So implementieren Sie den Vue-Mausrad-Scrolling-Umschalt-Routing-Effekt

So aktivieren Sie die MySQL-Remoteverbindung auf einem Linux-Server

Dieser Artikel zeigt Ihnen, wie Sie Vue 3.0 responsive verwenden

MySQL-Datenbank muss SQL-Anweisungen kennen (erweiterte Version)

Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3

Zusammenfassung zur Verwendung der Reduce()-Methode in JS

Ein kurzer Überblick über CSS3-Pseudoklassenselektoren

Detaillierte Erklärung, wann Javascript-Skripte ausgeführt werden

So lösen Sie das domänenübergreifende Front-End-Problem mithilfe des Nginx-Proxys

Gründe und Lösungen für langsame MySQL-Abfragen, die beim Senden von Daten hängen bleiben

Artikel empfehlen

Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL

Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite

So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS

Wie der Linux-Kernel in den Prozessadressraum eindringt und den Prozessspeicher ändert

Methode zur Wiederherstellung von Betriebs- und Wartungsdaten der MySQL-Datenbank

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

Tutorial zu HTML-Formular-Tags (2):

Detailliertes grafisches Tutorial zur Installation der virtuellen CentOS7-Maschine in Virtualbox

Vor- und Nachteile gängiger MySQL-Speicher-Engines

Detaillierte Erklärung von JavaScript Reduce

Kenntnisse zur Überwachung der MySQL-Indexnutzung (es lohnt sich, sie zu erwerben!)

Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)

CSS-Lösung für mehrspaltiges Layout

JavaScript implementiert eine Seiten-Scrolling-Animation

CSS-Zusammenfassungsnotizen: Beispiele für Transformationen, Übergänge und Animationen