url()
url() CSS 函式用於包含檔案。其引數可以是絕對 URL、相對 URL、Blob URL 或資料 URL。url() 函式可以作為另一個 CSS 函式（如 attr() 函式）的引數傳遞。根據它作為值的屬性，所尋求的資源可以是影像、字型或樣式表。url() 函式式表示法是 <url> 資料型別的值。
注意： URI 和 URL 之間存在差異。URI 標識資源。URL 是一種 URI，描述資源的位置。URI 既可以是 URL，也可以是資源的名稱 (URN)。
在 CSS Level 1 中，url() 函式式表示法只描述真正的 URL。在 CSS Level 2 中，url() 的定義被擴充套件為描述任何 URI，無論是 URL 還是 URN。令人困惑的是，這意味著 url() 可以用來建立 <uri> CSS 資料型別。這一變化不僅笨拙，而且可以說是沒有必要的，因為 URN 在實際 CSS 中幾乎從未使用過。為了消除這種混淆，CSS Level 3 回到了更窄的初始定義。現在，url() 只表示真正的 <url>。
相對 URL（如果使用）相對於樣式表的 URL（而不是網頁的 URL）。
url() 函式可以作為 background、background-image、border、border-image、border-image-source、content、cursor、filter、list-style、list-style-image、mask、mask-image、offset-path、clip-path、作為 @font-face 塊一部分的 src，以及 @counter-style/symbol 的值。
語法
/* 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);
值
<string>-
一個字串，指定一個 URL，它可以是相對或絕對地址，或者指向要包含的 Web 資源的指標，也可以是資料 URL。您還可以使用雜湊 URL 來引用 SVG 形狀或 SVG 濾鏡的 ID。
引號通常是可選的——如果 URL 包含括號、空格或引號（除非這些字元已轉義），或者如果地址包含 0x7e 以上的控制字元，則需要引號。應用正常的字串語法規則：雙引號不能出現在雙引號內部，單引號不能出現在單引號內部，除非它們被轉義。
<url-modifier>-
將來，
url()函式可能支援指定修飾符、識別符號或函式式表示法，以改變 URL 字串的含義。這在規範中不受支援，也未完全定義。
正式語法
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
示例
作為 background 屬性值
body {
background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
#0000dd no-repeat fixed;
}
用於將影像設定為列表專案符號
ul {
list-style: outside
url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}
在 content 屬性中的用法
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");
}
結果
使用資料 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");
}
在濾鏡中的用法
當 URL 用作濾鏡的路徑時，URL 必須是以下之一
- SVG 檔案的路徑，附加濾鏡的 ID。
- 濾鏡的 ID，如果 SVG 已存在於頁面上。
.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 */
}
規範
| 規範 |
|---|
| CSS 值和單位模組第 4 級 # URLs |
瀏覽器相容性
載入中…