url() CSS-Funktion - CSS | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

url() CSS-Funktion

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die url() CSS Funktion wird verwendet, um eine Datei einzufügen. 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 URI und beschreibt den Ort einer Ressource. Ein URI kann entweder eine URL oder ein Name (URN) einer Ressource sein.

In CSS Level 1 beschrieb die url() Funktionalnotation nur echte URLs. In CSS Level 2 wurde die Definition von url() erweitert, um jeden URI zu beschreiben, sei es eine URL oder eine 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 tatsächlichem CSS fast nie verwendet werden. Um die Verwirrung zu lindern, kehrte CSS Level 3 zur engeren, ursprünglichen Definition zurück. Nun bezeichnet url() nur 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 verwendet werden, src als Teil eines @font-face Blocks und @counter-style/symbol.

In diesem Artikel

Syntax

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/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

Ein String, der eine URL spezifiziert, die eine relative oder absolute Adresse oder ein Zeiger auf die Webressource, die eingebunden werden soll, oder eine Daten-URL ist. Sie können auch eine Hash-URL verwenden, um die ID einer SVG-Form 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 (es sei denn, diese Zeichen sind maskiert) oder wenn die Adresse Steuerzeichen über 0x7e enthält. Normale String-Syntaxregeln gelten: Doppelte Anführungszeichen dürfen innerhalb doppelter Anführungszeichen nicht vorkommen und einfache Anführungszeichen dürfen innerhalb einfacher Anführungszeichen nicht vorkommen, es sei denn, sie sind maskiert.

<url-modifier>

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

Formale Syntax

<url()> =
url( <string> <url-modifier>* ) |
<url-token>
Diese Syntax spiegelt den neuesten Standard gemäß CSS Values and Units Module Level 4 wider. Möglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilität für Informationen zur Unterstützung.

Beispiele

Als Wert der Hintergrund-Eigenschaft

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

Für die Einstellung eines Bildes als Listen-Punkt

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

ul {
  font-size: 3rem;
  margin: 0;
}

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

Verwendung in der Inhalteigenschaft

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:

Der Pfad zu einer SVG-Datei mit angehängter ID des Filters.
Die ID des Filters, wenn das 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 */
}

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden