url()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die url() CSS Funktion wird verwendet, um eine Datei einzubinden. Der Parameter kann eine absolute URL, eine relative URL, eine Blob-URL oder eine Daten-URL sein. Die url() Funktion kann als Parameter einer anderen CSS-Funktion übergeben werden, wie der attr() Funktion. Abhängig von der Eigenschaft, für die sie einen Wert darstellt, kann die gesuchte Ressource ein Bild, eine Schriftart oder ein Stylesheet sein. Die url() funktionale Notation ist der Wert für den <url> Datentyp.
Hinweis: Es gibt einen Unterschied zwischen einem URI und einer URL. Ein URI identifiziert eine Ressource. Eine URL ist eine Art von URI und beschreibt den Ort einer Ressource. Ein URI kann entweder eine URL oder ein Name (URN) einer Ressource sein.
In CSS Stufe 1 beschrieb die url() funktionale Notation nur echte URLs. In CSS Stufe 2 wurde die Definition von url() erweitert, um jeden URI zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete dies, dass url() verwendet werden konnte, um einen <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungeschickt, sondern möglicherweise auch unnötig, da URNs in der tatsächlichen CSS-Anwendung fast nie verwendet werden. Um die Verwirrung zu lindern, kehrte CSS Stufe 3 zur engeren, ursprünglichen Definition zurück. Jetzt bezeichnet url() nur noch echte <url>s.
Relative URLs, falls verwendet, sind relativ zur URL des Stylesheets (nicht zur URL der Webseite).
Die url() Funktion kann als Wert für background, background-image, border, border-image, border-image-source, content, cursor, filter, list-style, list-style-image, mask, mask-image, offset-path, clip-path,
src als Teil eines @font-face Blocks und @counter-style/symbol eingebunden werden.
Syntax
/* Basic usage */
url("https://example.com/images/myImg.jpg");
url('https://example.com/images/myImg.jpg');
url(https://example.com/images/myImg.jpg);
url("data:image/jpeg;base64,iRxVB0…");
url(myImg.jpg);
url(#IDofSVGpath);
/* associated properties */
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("my-icon.jpg");
cursor: url(my-cursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantastic-font.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");
/* Properties with fallbacks */
cursor: url(pointer.cur), pointer;
/* Associated short-hand properties */
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
/* As a parameter in another CSS function */
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(black, transparent));
/* as part of a non-shorthand multiple value */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
/* at-rules */
@document url("https://www.example.com/") { /* … */ }
@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);
Werte
<string>-
Ein String, der eine URL spezifiziert, was eine relative oder absolute Adresse oder ein Verweis auf die einzubindende Webressource oder eine Daten-URL ist. Sie können auch eine Hash-URL verwenden, um die ID einer SVG-Shape oder eines SVG-Filters zu referenzieren.
Die Anführungszeichen sind im Allgemeinen optional — sie sind erforderlich, wenn die URL Klammern, Leerzeichen oder Anführungszeichen enthält (sofern diese Zeichen nicht entkommen sind), oder wenn die Adresse Steuerzeichen oberhalb von 0x7e enthält. Normale String-Syntax-Regeln gelten: Doppelte Anführungszeichen dürfen nicht innerhalb doppelter Anführungszeichen und einfache Anführungszeichen nicht innerhalb einfacher Anführungszeichen vorkommen, es sei denn, sie sind entkommen.
<url-modifier>-
In Zukunft könnte die
url()Funktion unterstützen, einen Modifikator anzugeben, welcher ein Identifikator oder eine funktionale Notation ist, die die Bedeutung des URL-Strings ändert. Dies wird aktuell nicht unterstützt und ist in der Spezifikation nicht vollständig definiert.
Formale Syntax
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
Beispiele
Als Hintergrund-Eigenschaftswert
body {
background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
#0000dd no-repeat fixed;
}
Zum Setzen eines Bildes als Aufzählungszeichen
ul {
list-style: outside
url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}
Verwendung in der Content-Eigenschaft
HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS
li::after {
content: " - "
url("https://mdn.github.io/shared-assets/images/examples/star-white_16x16.png");
}
Ergebnis
Verwendung einer Daten-URL
CSS
body {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}
Verwendung in Filtern
Wenn eine URL als Pfad für einen Filter verwendet wird, muss die URL eine der folgenden sein:
- Der Pfad zu einer SVG-Datei mit der ID des Filters angehängt.
- die ID des Filters, wenn das SVG bereits auf der Seite vorhanden ist.
.blur {
filter: url("my-file.svg#svg-blur"); /* the URL of an SVG file used as a filter */
}
.inline-blur {
filter: url("#svg-blur"); /* the ID of an SVG that is embedded in the HTML page */
}
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 4 # urls |