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 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 übergeben werden, wie der attr()-Funktion. 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()-Funktionsnotation stellt den Wert für den <url>-Datentyp dar.
Hinweis: Es gibt einen Unterschied zwischen einem URI und einer URL. Ein URI identifiziert eine Ressource. Eine URL ist ein Typ eines 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()-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 dies, dass url() verwendet werden konnte, um einen <uri>-CSS-Datentyp zu erstellen. Diese Änderung war nicht nur umständlich, sondern auch, diskutierbar, unnötig, da URNs in tatsächlichem CSS selten verwendet werden. Um die Verwirrung zu verringern, kehrte CSS Level 3 zur engeren, ursprünglichen Definition zurück. Jetzt bezeichnet url() nur echte <url>s.
Relative URLs werden relativ zur Stylesheet-URL aufgelöst, nicht zur Webseiten-URL. Wenn jedoch eine url() innerhalb einer benutzerdefinierten Eigenschaft (z. B. --my-image: url(foo.jpg)) verwendet wird, wird die relative URL nicht sofort aufgelöst. Sie wird aufgelöst, wenn die benutzerdefinierte Eigenschaft über die var()-Substitution in einer Standard-Eigenschaft ausgewertet wird. Die Basis-URL zu diesem Zeitpunkt ist das Stylesheet, in dem der var()-Verweis erscheint, und nicht dort, wo die benutzerdefinierte Eigenschaft definiert wurde.
Die url()-Funktion kann als Wert für background, background-image, 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 einbezogen 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 angibt, die eine relative oder absolute Adresse oder ein Verweis auf die einzubindende Webressource ist, oder eine Daten-URL. 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 können nicht innerhalb doppelter Anführungszeichen auftreten und einfache Anführungszeichen können nicht innerhalb einfacher Anführungszeichen auftreten, es sei denn, sie sind maskiert.
<url-modifier>-
In Zukunft könnte die
url()-Funktion die Angabe eines Modifikators unterstützen, eines Identifikators oder einer funktionalen Notation, die die Bedeutung der URL-String verändert. Dies wird derzeit nicht unterstützt und nicht vollständig in der Spezifikation definiert.
Formale Syntax
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
Beispiele
Als Wert der Background-Eigenschaft
body {
background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
#0000dd no-repeat fixed;
}
Zum Festlegen eines Bildes als Listenaufzählung
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 eines der folgenden sein:
- Der Pfad zu einer SVG-Datei mit der angehängten ID des Filters.
- 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
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # urls |