Syntax
<url> = url()
Werte
Der Wert kann eine absolute oder relative URL sein.
<url()>-
Die
url()-Funktion akzeptiert eine URL, die entweder als String in Anführungszeichen oder als nicht quotiertes 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, repräsentiert eine URL, die ein Zeiger auf eine interne oder externe Ressource ist. Die Ressource kann ein Bild, ein Video, eine CSS-Datei, eine Schriftartdatei, eine SVG-Funktion 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 einzubinden, ist implementierungsabhängig und aus Sicherheitsgründen oft eingeschränkt.
Je nach CSS-Eigenschaft, auf die eine <url> verweist, die externe Ressourcen referenziert, kann die Ressource den Beschränkungen von Cross-Origin Resource Sharing (CORS) unterliegen.
Einige CSS-Eigenschaften, einschließlich mask-image, filter, sowie clip-path und einige andere, wenn sie sich auf <svg>-Bildelemente beziehen, können eine erfolgreiche CORS-Validierung erfordern, wenn sie externe, übergreifende Ressourcen im CORS-Modus abrufen. Wenn die CORS-Validierung fehlschlägt, kann die Ressource blockiert werden und wird daher nicht zur Darstellung verwendet.
Beachten Sie, dass der <url>-Wertetyp selbst keine CORS-Validierung erzwingt, sondern einzelne CSS-Eigenschaften dies tun.
Wenn Sie eine HTML-Datei direkt mit file:// öffnen, können Ressourcen fehlschlagen, da CORS-Regeln lokal gelten. Moderne Browser behandeln file:// als einzigartigen Ursprung, was bedeutet, dass dateiübergreifende Ressourcen blockiert werden können. In diesem Fall kann ein HTTP-Server eingerichtet 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
| Specification |
|---|
| CSS Values and Units Module Level 4 # url-value |