url()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Die url() CSS Funktion wird verwendet, um eine Datei einzubinden. Der Parameter ist eine absolute URL, eine relative URL, eine Blob-URL oder eine Daten-URL. 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 ein Wert ist, 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 Standort einer Ressource. Ein URI kann entweder eine URL oder ein Name (URN) einer Ressource sein.

In CSS Level 1 beschrieb die url() funktionale Notation nur echte URLs. In CSS Level 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, streitbar, unnötig, da URNs in der tatsächlichen CSS-Anwendung fast nie verwendet werden. Um die Verwirrung zu mildern, kehrte CSS Level 3 zur engeren, ursprünglichen Definition zurück. Jetzt steht url() nur noch für echte <url>s.

css
/* 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/jpg;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(rgb(0 0 0 / 100%), 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);

Relative URLs, falls verwendet, beziehen sich auf die URL des Stylesheets (und nicht auf die 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 enthalten sein.

Syntax

Werte

<string>

Ein String, der eine URL oder die ID einer SVG-Form spezifizieren kann.

url

Eine URL, die eine relative oder absolute Adresse oder ein Zeiger auf die einzubindende Webressource oder eine Daten-URL ist, optional in einfachen oder doppelten Anführungszeichen. Anführungszeichen sind erforderlich, wenn die URL Klammern, Leerzeichen oder Anführungszeichen enthält, es sei denn, diese Zeichen sind maskiert oder die Adresse enthält Steuerzeichen über 0x7e. 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 maskiert. Folgende sind alle gültig und gleichwertig:

css
<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

Wenn Sie sich entscheiden, die URL ohne Anführungszeichen zu schreiben, verwenden Sie einen Backslash (\) vor allen Klammern, Leerzeichen, einfachen Anführungszeichen (') und doppelten Anführungszeichen ("), die Teil der URL sind.

path

Referenziert die ID einer SVG-Form oder eines SVG-Filters.

<url-modifier>

In Zukunft könnte die url() Funktion die Angabe eines Modifikators unterstützen, einer Bezeichnung oder einer funktionalen Notation, die die Bedeutung des URL-Strings verändert. Dies wird derzeit nicht unterstützt und ist in der Spezifikation nicht vollständig definiert.

Formale Syntax

Beispiele

Als Wert der Hintergrund-Eigenschaft

css
body {
  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
    #00d no-repeat fixed;
}

Für das Setzen eines Bildes als Aufzählungszeichen

css
ul {
  list-style: outside
    url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}

Verwendung in der Content-Eigenschaft

HTML

html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

CSS

css
li::after {
  content: " - "
    url("https://mdn.github.io/shared-assets/images/examples/star-white_16x16.png");
}

Ergebnis

Verwendung einer Daten-URL

CSS

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:

  1. Der Pfad zu einer SVG-Datei mit angehängter ID des Filters.
  2. die ID des Filters, wenn die SVG bereits auf der Seite existiert.
css
.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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<url>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch