CSS 資料型別 - <image>

CSS 資料型別<image>表示一個二維影像。

資料型別<image>可以使用以下任何值表示

由url()資料型別定義的影像
<gradient>資料型別
由element()函式定義的網頁的一部分
由image()函式定義的影像、影像片段或純色塊
由cross-fade()函式定義的兩個或多個影像的混合。
由image-set()函式定義的基於解析度選擇的影像集合

語法

<image> = <url> | <image-list> | <element-reference>  | <gradient></gradient>

CSS 可以處理以下型別的影像

所有具有固有尺寸的影像，即具有自然大小的影像，例如JPEG、PNG或其他光柵格式的影像。
所有具有多個固有尺寸的影像，在一個檔案中存在多個版本
所有沒有固有尺寸但具有固有縱橫比的影像（寬度和高度之間的比率），例如SVG或其他向量格式的影像。
所有既沒有固有尺寸也沒有固有縱橫比的影像，例如 CSS 漸變。

物件的具體大小使用以下方式確定

固有尺寸
指定大小，由 CSS 屬性定義，例如width、height或background-size
預設大小，由使用影像的屬性型別確定。

下表顯示了基於 CSS 屬性的影像型別

物件型別（CSS 屬性）	預設物件大小
background-image	元素背景定位區域的大小
list-style-image	1em 字元的大小
border-image-source	元素邊框影像區域的大小
cursor	瀏覽器定義的大小，與客戶端系統上的常用游標大小匹配
mask-image	用作遮罩層的影像。
shape-outside	定義一個形狀，內聯內容圍繞該形狀換行
mask-border-source	設定用於建立元素遮罩邊框的影像
@counter-style 的 symbols()	如果支援，則瀏覽器定義的大小與客戶端系統上的常用游標大小匹配
偽元素的 content (::after / ::before)	300px × 150px 矩形

CSS <image> - 計算影像大小

影像的具體大小根據以下演算法定義或計算

當指定大小同時定義width和height時，這些值可用於確定物件的具體大小。
當指定大小僅定義width或僅定義height時，缺失的值將使用固有比率確定（如果可用）；如果指定值匹配，則使用固有尺寸，或者使用該缺失值的預設物件大小。
當指定大小既未定義width也未定義height時，物件的尺寸將按比例測量，使其與影像的固有縱橫比匹配，並且不超過任何維度的大小。如果影像沒有固有縱橫比，則使用其應用到的物件的固有縱橫比。例如，如果物件也沒有固有縱橫比，則缺失的寬度或高度將取自預設物件大小。

無障礙問題：輔助技術無法從瀏覽器獲取有關背景影像的任何特殊資訊。這對於螢幕閱讀器來說非常重要，因為螢幕閱讀器不會宣佈背景影像的存在，因此不會傳達任何相關資訊。如果影像包含一些理解整個頁面內容的關鍵資訊，這些資訊將被忽略。因此，建議在文件中以語義的方式描述重要的資訊。

<image> = <url> | <gradient>

/* Valid images */
url(sample.jpg)                                 /* A <url>, as long as sample.jpg is an actual image. */

linear-gradient(red, yellow)                    /* A <gradient> */

element(#realid)                                /* A part of the webpage, referenced with the element() function,
                                                if "realid" is an existing ID on the page. */

cross-fade(20% url(test.png), url(test1.png))   /* cross faded images, with test being 20% opaque
                                                and test1 being 80% opaque. */

image-set('test.jpg' 1x, 'test-2x.jpg' 2x)      /* A selection of images with varying resolutions. */

/*Invalid images */
sample.jpg                                      /* An image file must be defined using url() function. */

url(test.pdf)                                   /* A file pointed by the url() function must be an image. */

element(#fakeid)                                /* An element ID must be an existing ID on the page. */

image(z.jpg#xy=0,0)                             /* The spatial fragment must be written in the format of xywh=#,#,#,# */

image-set('test1.jpg' 1x, 'test2.jpg' 1x)       /* every image in an image set must have a different resolutions */

CSS <image> - 與 url() 一起使用

以下示例演示瞭如何使用<image>資料型別透過 url() 函式定義影像。該影像透過 CSS 屬性background-image用作背景

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

在上面的示例中，使用了 url() 函式，該函式又使用資料型別<image>將影像設定為 div 元素的背景。

CSS <image> - 與 linear-gradient() 一起使用

以下示例演示瞭如何使用<image>資料型別透過 linear-gradient() 函式定義影像。該影像透過 CSS 屬性background-image用作背景

<html>
<head>
<style>
   div {
      background-image: linear-gradient(red, yellow, blue, green, pink);
      width: 200px;
      height: 200px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

在上面的示例中，使用了 linear-gradient() 函式，該函式又使用資料型別<image>將影像設定為 div 元素的背景。

CSS <image> - 與 cross-fade() 一起使用

以下示例演示瞭如何使用<image>資料型別透過 cross-fade() 函式定義影像。該影像透過 CSS 屬性background-image用作背景

<html>
<head>
<style>
   div {
      background-image: -webkit-cross-fade(url(images/border.png), url(images/tree.jpg), 25%);
      background-image: cross-fade(url(images/border.png), url(images/tree.jpg), 25%);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

在上面的示例中，使用了 cross-fade() 函式，該函式又使用資料型別<image>將影像的混合設定為 div 元素的背景。

列印頁面