Ich arbeite an einer HTML5-App für Mobilgeräte und habe zunächst den Hintergrund eines DIV-Elements, das wie folgt über das CSS festgelegt wurde:
%Vor%In meiner App habe ich eine Methode, die den Hintergrund-DIV basierend auf einer Auswahl ändert, die in einer Dropdown-Liste aus einer früheren Methode mit jQuery gemacht wurde:
%Vor%Das alles funktioniert gut, wenn ich mich auf meiner Seite befinde. Ich habe jedoch einige Links in der App, die Hash-Tags verwenden, um auf der Seite zu navigieren (z. B. #MyHonor). Wenn ich zu einem dieser Tags navigiert habe und meine Reset-Funktion oben aufgerufen habe, bricht das Bild ab. Wenn ich den Chrome Inspector nach oben deute, um das DIV-Tag zu sehen, heißt es, dass das Bild, das es zu laden versucht, "images / MyHonor / ClanSpider.png" ist, das nicht existiert.
Ich weiß, dass die CSS-URL Links in Bezug auf ihren Speicherort innerhalb der Anwendung generiert, aber es spielt keine Rolle, wohin ich die CSS-Dateien in der Anwendung verschiebe.
Gibt es eine Möglichkeit für mich, neu zu schreiben, was aus der URL-Verarbeitung kommt, oder eine alternative Möglichkeit, das Hintergrundbild des DIV zu spezifizieren, ohne irgendwelche serverseitige Verarbeitung durchzuführen? Im Idealfall wird diese Anwendung die Manifest-Cache-Funktion von HTML5 durchlaufen, so dass ich keinen Zugriff auf serverbasierte Sprachen habe.
Wenn ich Ihre Kommentare zu den anderen Antworten durchlese, denke ich, dass Sie ein Problem für sich selbst schaffen, das nicht wirklich existiert. Wenn url('/images/ClanSpider.png') funktioniert, wenn Sie auf den Webserver hochladen, besteht der Trick darin, dass es beim lokalen Arbeiten genauso funktioniert. Bei weitem der einfachste Weg, dies zu tun, vor allem, wenn Ihr Fokus ist eine Offline-App, die wenig auf serverseitige Anforderungen hat (was ich nehme an, ist wahr, wie Sie file:/// URIs erwähnt), ist eine lokale laufen Webserver.
Python wird mit einem Modul SimpleHTTPServer geliefert, wenn Sie Python installiert haben , dann ist es so einfach wie hier zu starten Ihr L5RHonor -Projektverzeichnis an einer Eingabeaufforderung und den folgenden Befehl ausgeben:
Dann anstatt auf Ihre Dateien mit URIs wie folgt zuzugreifen:
%Vor%Sie werden so auf sie zugreifen:
%Vor%Alle Ihre root relativen Dateipfade werden jetzt korrekt funktionieren, als zusätzlichen Bonus funktioniert das Offline-Caching in Chrome korrekt und Sie können anhand des Protokolls im Eingabeaufforderungsfenster erkennen, dass es die richtige Caching-Funktion anfordert Dateien nach Ihrem Manifest.
Die einfachste Lösung ist natürlich, der URL einen Schrägstrich hinzuzufügen, um sie absolut zu machen. Das wird gut funktionieren, aber es macht es unmöglich, die Anwendung in ein Unterverzeichnis zu verschieben oder statische Ressourcen auf einen anderen Server zu verschieben. Wenn das ein Problem ist, gibt es verschiedene alternative Möglichkeiten.
Wenn die Anzahl der möglichen Hintergrundbilder endlich ist, können Sie jede in einer eigenen Klasse definieren:
%Vor% und dann ein .addClass() , um das korrekte Bild einzustellen.
Abgesehen davon gibt es meines Wissens keine Möglichkeit, einen Pfad relativ zum Stylesheet (und nicht zum aktuellen Dokument) anzugeben, wenn ein Hintergrundbildpfad in Javascript festgelegt wird. Sie müssten mit absoluten Pfaden arbeiten oder einen Wurzelpfad in JavaScript definieren und Folgendes verwenden:
%Vor% Der Speicherort der CSS-Datei ist irrelevant. Sie ändern die Eigenschaft .style eines HTML-Elements. Dies entspricht der Verwendung des Stils Attribut .
Da dies CSS im Dokument eingebettet ist, sind alle URIs relativ zum Dokument .
Sie möchten wahrscheinlich die URL mit / starten, oder wenn Sie den absoluten Standort in Ihrer Frage wirklich wollen: http://
Tags und Links css html5 background-image