CSS 函式 - url()

CSS 中的 url() 函式用於透過路徑新增檔案（影像或字型檔案）。此函式的引數可以是 絕對 URL、相對 URL、blob URL 或 data URL。

url() 函式也可以作為引數傳遞給其他 CSS 函式，例如 attr() 函式。
根據 url() 所屬的屬性，所搜尋的資源可以是影像、字型或樣式表。
對於 <url> 資料型別，url() 函式表示法是其值。

相對 URL 相對於樣式表的 URL，而不是網頁的 URL。

url() 函式可以作為以下屬性的值包含：

URI 和 URL 是不同的，其中 URI 是資源，URL 是一種描述資源位置的 URI 型別。URI 可以是 URL 或資源的名稱。

可能的值

url() 函式可以具有以下值：

<string>：列出可以是 URL 或 SVG 形狀 ID 的字串。讓我們在以下部分中檢視每個部分

<url>

可以可選地用單引號或雙引號指定相對或絕對 URL 或指向 Web 資源或資料 URL 的指標。
如果 URL 包含括號、空格或引號，則必須使用引號。
如果地址包含 0x7e 以上的控制字元，則也需要使用引號。
除非轉義，否則單引號不能在單引號內使用，雙引號也適用。
如果要編寫不帶引號的 URL，則在 URL 中包含的任何括號、空格字元、單引號和雙引號之前使用反斜槓 (\)。

以下情況有效且等效

<css_property>: url("images/logo.png")
<css_property>: url('images/logo.png')
<css_property>: url(images/logo.png)

path

表示 SVG 形狀的 ID。
形狀可以是 circle、ellipse、line、path、polygon、polyline 或 rect。
形狀的幾何圖形用作路徑。

語法

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

CSS url() - 使用 background-image 屬性

在以下示例中，url() 函式與 background-image 屬性一起使用。

<html>
<head>
<style>
   div {
      width: 200px;
      height: 200px;
      background-image: url(images/border.png);
      border: 5px inset black;
   }
</style>
</head>
<body>
   <h2>use of url() with background property</h2>
   <div></div>
</body>
</html>

CSS url() - 使用偽元素 ::before

在以下示例中，url() 函式與偽元素 ::before 一起使用，針對屬性

<html>
<head>
<style>
   div {
      width: 200px;
      height: 200px;
      background-image: url(images/border.png);
      border: 5px inset black;
   }

   li::before {
      content: url(images/smiley.png);
   }
   
   li {
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>use of url() with pseudo-element ::before</h2>
   <div>
      <ul>
         <li>  Item 1</li>
         <li>  Item 2</li>
      </ul>
   </div>
</body>
</html>

列印頁面