Syntax
<url> = url()
Werte
Der Wert kann eine absolute oder relative URL sein.
<url()>-
Die
url()-Funktion akzeptiert eine URL, die als Zeichenkette in Anführungszeichen oder als unverändertes URL-Token geschrieben werden kann.
Hinweis:
Das CSS-Werte- und Einheitenmodul führt auch die src()-Funktion als <url>-Wert ein. Derzeit unterstützt kein Browser diese Funktion.
Beschreibung
Der <url>-Datentyp, geschrieben mit der url()-Funktion, stellt einen URL dar, der ein Zeiger auf eine interne oder externe Ressource ist. Die Ressource kann ein Bild, ein Video, eine CSS-Datei, eine Schriftartdatei, ein SVG-Feature usw. sein. Die URL kann absolut oder relativ sein.
/* Relative URL */
url("styles.css")
url("assets/icon.svg")
url("../assets/image.png")
/* Absolute URL */
url("http://example.com/fonts/myFont.ttf")
url("https://example.com/images/background.jpg")
/* Data URL */
url("data:image/svg+xml,%3Csvg'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3C/svg%3E")
url("data:image/png;base64,iVBORw0KGgoAAA...")
Externe Ressourcen und CORS
Die Fähigkeit, externe Ressourcen über den <url>-Wert zu importieren, ist implementierungsabhängig und oft aus Sicherheitsgründen eingeschränkt.
Abhängig von der CSS-Eigenschaft, auf die eine <url> verweist, können externe Ressourcen den Einschränkungen von Cross-Origin Resource Sharing (CORS) unterliegen.
Einige CSS-Eigenschaften, einschließlich mask-image, filter, sowie clip-path und einige andere beim Verweisen auf <svg>-Bildelemente können eine erfolgreiche CORS-Validierung erfordern, wenn sie dazu führen, dass externe Ressourcen über die CORS-Methode abgerufen werden. Wenn die CORS-Validierung fehlschlägt, kann die Ressource blockiert und daher nicht für die Darstellung verwendet werden.
Beachten Sie, dass der <url>-Wertetyp selbst keine CORS-Validierung erzwingt, sondern einzelne CSS-Eigenschaften dies tun.
Beim direkten Öffnen einer HTML-Datei mit file:// können Ressourcen fehlschlagen, da CORS-Regeln lokal angewendet werden. Moderne Browser behandeln file:// als origin und bedeutet, dass ressourcenübergreifende Dateien blockiert werden können. In diesem Fall kann ein HTTP-Server gehostet werden, um CORS-Fehler zu vermeiden. Das Sicherheitsverhalten von file://-URLs variiert auch je nach Browser und den Dateiberechtigungen des Betriebssystems.
Beispiele
Relative URL
body {
background-image: url("images/background.jpg");
}
Absolute URL
body {
background-image: url("https://example.com/images/background.jpg");
}
Spezifikationen
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # url-value |