url()

url() CSS 函式 用於包含檔案。引數可以是絕對 URL、相對 URL、Blob URL 或資料 URL。url() 函式可以作為其他 CSS 函式的引數傳遞，例如 attr() 函式。根據其作為值的屬性，所查詢的資源可以是影像、字型或樣式表。url() 函式表示法是 <url> 資料型別的值。

注意：URI 和 URL 之間存在區別。URI 標識資源。URL 是一種 URI，描述資源的位置。URI 可以是 URL 或資源的名稱（URN）。

在 CSS 級別 1 中，url() 函式表示法僅描述了真正的 URL。在 CSS 級別 2 中，url() 的定義擴充套件到描述任何 URI，無論是 URL 還是 URN。令人困惑的是，這意味著 url() 可用於建立 <uri> CSS 資料型別。這種更改不僅很笨拙，而且可以說是不必要的，因為 URN 在實際的 CSS 中幾乎從未使用過。為了緩解這種混亂，CSS 級別 3 回到了更窄的初始定義。現在，url() 僅表示真正的 <url>。

css
/* Simple usage */
url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
url(#IDofSVGpath);

/* associated properties */
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.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);

如果使用相對 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、src（作為 @font-face 塊的一部分）以及 @counter-style/symbol。

語法

值

<string>

可以指定 URL 或 SVG 形狀 ID 的字串。

<url>

一個 URL，可以是相對地址或絕對地址，或者指向要包含的 Web 資源的指標，或者是一個數據 URL，可以選擇用單引號或雙引號括起來。如果 URL 包含括號、空格或引號，則需要使用引號，除非這些字元已轉義，或者地址包含大於 0x7e 的控制字元。雙引號內不能出現雙引號，單引號內不能出現單引號，除非已轉義。以下都是有效且等價的。

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)

如果選擇不使用引號編寫 URL，請在 URL 中包含的任何括號、空格字元、單引號 (') 和雙引號 (") 前使用反斜槓 (\) 進行轉義。

路徑

引用 SVG 形狀（circle、ellipse、line、path、polygon、polyline 或 rect）的 ID，使用形狀的幾何圖形作為路徑。

<url-modifier>

將來，url() 函式可能會支援指定一個修改符、一個識別符號或一個函式表示法，從而改變 URL 字串的含義。規範中尚不支援且未完全定義。

正式語法

url( <string> <url-modifier>* )

示例

在 background 屬性中使用的 url

css
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}

載入影像作為列表專案符號的 url

css
ul {
  list-style: square url(http://www.example.com/redball.png);
}

在 content 屬性中的用法

HTML

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

css
li::after {
  content: " - " url(star.gif);
}

結果

使用資料 URL

HTML

html
<div class="background"></div>

CSS

css
.background {
  background: yellow;
  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 必須是以下之一：

  1. 帶有附加過濾器 ID 的 SVG 檔案的路徑。
  2. 過濾器的 ID，如果 SVG 已存在於頁面上。
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 */
}

規範

規範
CSS 值和單位模組級別 4
# urls

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱