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()-Funktion von CSS wird verwendet, um eine Datei einzubinden. Der Parameter kann eine absolute URL, eine relative URL, eine Blob-URL oder eine Data-URL sein. Die url()-Funktion kann als Parameter einer anderen CSS-Funktion, wie der attr()-Funktion, übergeben werden. Abhängig von der Eigenschaft, für die sie verwendet wird, kann die gesuchte Ressource ein Bild, eine Schriftart oder ein Stylesheet sein. Die url()-Funktionsnotation 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 ein Typ von URI und beschreibt die Lage einer Ressource. Ein URI kann entweder eine URL oder ein Name (URN) einer Ressource sein.
In CSS Level 1 beschrieb die url()-Funktionsnotation nur echte URLs. In CSS Level 2 wurde die Definition von url() erweitert, um jeden URI zu beschreiben, sei es eine URL oder ein URN. Verwirrenderweise bedeutete das, dass url() verwendet werden konnte, um einen <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungeschickt, sondern, diskutierbar, unnötig, da URNs fast nie in tatsächlichem CSS verwendet werden. Um die Verwirrung zu lindern, kehrte CSS Level 3 zur engeren, anfänglichen Definition zurück. Jetzt bezeichnet url() nur noch echte <url>s.
Wenn relative URLs verwendet werden, sind sie relativ zur URL des Stylesheets (nicht zur URL der Webseite).
Die url()-Funktion kann als Wert einbezogen werden 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
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, welche eine relative oder absolute Adresse, oder ein Hinweis auf die einzubindende Webressource ist, oder eine Data-URL. Sie können auch eine Hash-URL verwenden, um die ID einer SVG-Form oder eines SVG-Filters zu referenzieren.
Anführungszeichen sind im Allgemeinen optional—sie sind erforderlich, wenn die URL Klammern, Leerzeichen oder Anführungszeichen (es sei denn, diese Zeichen sind maskiert) enthält, oder wenn die Adresse Steuerzeichen oberhalb von 0x7e enthält. Es gelten die normalen Regeln für Strings: Doppelte Anführungszeichen können nicht innerhalb doppelter Anführungszeichen stehen und einfache Anführungszeichen können nicht innerhalb einfacher Anführungszeichen stehen, es sei denn, sie sind maskiert.
<url-modifier>-
In der Zukunft könnte die
url()-Funktion die Angabe eines Modifikators unterstützen, eines Identifikators oder einer Funktionsnotation, die die Bedeutung der URL-Zeichenkette ändert. Dies wird derzeit nicht unterstützt und ist in der Spezifikation nicht vollständig definiert.
Formale Syntax
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
Beispiele
Als Wert der Hintergrund-Eigenschaft
body {
background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
#0000dd no-repeat fixed;
}
Für die Einstellung eines Bildes als Listenkugel
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 Data-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 die SVG bereits auf der Seite existiert.
.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 |