CSS Hintergrundbild - Was ist die richtige Verwendung?

Was ist die korrekte Verwendung der CSS-Hintergrundbildeigenschaft? Die wichtigsten Dinge, die ich zu verstehen versuche, sind

1. Muss es in Anführungszeichen stehen, dh: background-image: url('images/slides/background.jpg');
2. Kann es ein relativer Pfad sein (wie oben) oder muss es eine vollständige URL sein?
3. Alle anderen Punkte, die ich beachten sollte, um sicherzustellen, dass sie in standardkonformen Browsern ordnungsgemäß funktionieren.

Der Pfad kann entweder voll oder relativ sein (wenn das Bild aus einer anderen Domäne stammt, muss es natürlich voll sein).

Sie müssen keine Anführungszeichen in der URI verwenden. Die Syntax kann entweder sein:

background-image: url(image.jpg);

Oder

background-image: url("image.jpg");

Ab W3 :

Einige Zeichen in einem nicht in Anführungszeichen gesetzten URI, z. B. Klammern, Leerzeichen, einfache Anführungszeichen (') und doppelte Anführungszeichen ("), müssen mit einem umgekehrten Schrägstrich versehen werden, damit der resultierende URI-Wert ein URI-Token ist:' \ (', '\)'.

In solchen Fällen ist es entweder erforderlich, Anführungszeichen oder doppelte Anführungszeichen zu verwenden oder die Zeichen zu maskieren.

1. Nein, Sie brauchen keine Angebote.

2. Ja, du kannst. Beachten Sie jedoch, dass relative URLs aus der URL Ihres Stylesheets aufgelöst werden.

3. Verwenden Sie besser keine Anführungszeichen. Ich denke, es gibt Kunden, die sie nicht verstehen.

1) Zitate zu setzen ist eine gute Angewohnheit

2) es kann ein relativer Pfad sein, zum Beispiel:

background-image: url('images/slides/background.jpg');

sucht nach Bildern in dem Ordner, aus dem CSS geladen wird. Wenn sich Bilder in einem anderen Ordner oder außerhalb des CSS-Ordnerbaums befinden, sollten Sie den absoluten Pfad oder relativ zum Stammpfad verwenden (beginnend mit /).

3) Sie sollten eine vollständige Deklaration für das Hintergrundbild verwenden, damit es sich in standardkonformen Browsern wie folgt konsistent verhält:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

Relative Pfade sind in Ordnung und Anführungszeichen sind nicht erforderlich. Eine andere Sache, die helfen kann, ist die Verwendung der backgroundEigenschaft "Kurzschrift" , um eine Hintergrundfarbe anzugeben, falls das Bild nicht geladen wird oder aus irgendeinem Grund nicht verfügbar ist.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

Beachten Sie auch, dass Sie angeben können, ob und in welche Richtung das Bild wiederholt werden soll (wenn Sie dies nicht angeben, wird standardmäßig horizontal und vertikal wiederholt), sowie die Position des Bildes relativ zu seinem Container.

Wenn sich Ihre Bilder in einem separaten Verzeichnis Ihrer CSS-Datei befinden und Sie möchten, dass der relative Pfad im Stammverzeichnis Ihrer Website beginnt:

background-image: url('/Images/bgi.png');

Überprüfen Sie einfach die Verzeichnisstruktur, in der genau das Bild angezeigt wird. Angenommen, Sie haben einen CSS-Ordner und einen Bilderordner außerhalb des CSS-Ordners. Dann müssen Sie "../ images / image.jpg" verwenden, und es funktioniert wie bei mir Verzeichnisstruktur.

Sie brauchen wirklich keine Anführungszeichen, wenn Sie beispielsweise das Bild aus Ihrer CSS-Datei verwenden, das es sein kann

{background-image: url(your image.png/jpg etc);}

Sie müssen keine Anführungszeichen verwenden und können einen beliebigen Pfad verwenden!

Auf den jeweiligen Sitepoint-Referenzseiten finden Sie Hintergrundbilder und URIs

1. Es muss nicht in Anführungszeichen stehen, kann aber verwendet werden, wenn Sie möchten. (Ich denke, IE5 / Mac unterstützt keine einfachen Anführungszeichen).
2. Sowohl relativ als auch absolut ist möglich; Ein relativer Pfad ist relativ zum Pfad der CSS-Datei.

Schreiben Sie einfach wie unten in Ihre CSS-Datei

background:url("images/logo.jpg")