<image>
Baseline 廣泛可用 *
語法
<image> 資料型別可以用以下任意一種表示：
- 由
<url>資料型別表示的影像 - 一個
<gradient>資料型別 - 網頁的一部分，由
element()函式定義 - 由
image()函式定義的影像、影像片段或純色塊 - 由
cross-fade()函式定義的兩個或多個影像的混合。 - 根據解析度選擇的影像，由
image-set()函式定義。 - 由 繪製工作let 使用
paint()函式生成。
描述
CSS 可以處理以下幾種影像：
- 具有固有尺寸（自然大小）的影像，如 JPEG、PNG 或其他柵格格式。
- 具有多個固有尺寸的影像，在一個檔案中存在多個版本，如一些 .ico 格式。（在這種情況下，固有尺寸將是面積最大且寬高比與包含框最相似的影像的尺寸。）
- 沒有固有尺寸但具有固有寬高比的影像，如 SVG 或其他向量格式。
- 既沒有固有尺寸也沒有固有寬高比的影像，如 CSS 漸變。
CSS 使用 (1) 物件的固有尺寸；(2) 物件的指定尺寸，由 CSS 屬性如 width、height 或 background-size 定義；以及 (3) 物件的預設尺寸，由影像使用的屬性型別決定，來確定物件的具體尺寸
| 物件型別 (CSS 屬性) | 預設物件尺寸 |
|---|---|
background-image |
元素的背景定位區域的大小 |
list-style-image |
一個 1em 字元的大小 |
border-image-source |
元素的邊框影像區域的大小 |
cursor |
瀏覽器定義的，與客戶端系統上通常的滑鼠游標大小匹配的大小 |
mask-image |
? |
shape-outside |
? |
mask-border-source |
? |
symbols() 用於 @counter-style |
有風險的特性。如果支援，瀏覽器定義的，與客戶端系統上通常的滑鼠游標大小匹配的大小 |
偽元素的 content (::after/::before) |
一個 300px × 150px 的矩形 |
具體物件尺寸使用以下演算法計算：
- 如果指定尺寸定義了寬度和高度，則這些值用作具體物件尺寸。
- 如果指定尺寸只定義了寬度或只定義了高度，則如果存在固有比例，則使用固有比例確定缺失值；如果指定值匹配，則使用固有尺寸；或者使用該缺失值的預設物件尺寸。
- 如果指定尺寸既沒有定義寬度也沒有定義高度，則計算具體物件尺寸，使其與影像的固有寬高比匹配，但任何維度都不能超過預設物件尺寸。如果影像沒有固有寬高比，則使用它所應用的物件的固有寬高比；如果該物件也沒有，則缺失的寬度或高度取自預設物件尺寸。
注意：並非所有瀏覽器都支援所有屬性上的每種影像型別。請參閱瀏覽器相容性部分瞭解詳細資訊。
無障礙
瀏覽器不會向輔助技術提供任何有關背景影像的特殊資訊。這對於螢幕閱讀器來說尤其重要，因為螢幕閱讀器不會播報背景影像的存在，因此也不會向其使用者傳達任何資訊。如果影像包含對理解頁面整體目的至關重要的資訊，最好在文件中以語義化的方式對其進行描述。
正式語法
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
有效影像
css
url("test.jpg") /* A <url>, as long as test.jpg is an actual image */
linear-gradient(blue, red) /* A <gradient> */
element(#real-id) /* A part of the webpage, referenced with the element() function,
if "real-id" is an existing ID on the page */
image(ltr "arrow.png#xywh=0,0,16,16", red)
/* A section 16x16 section of <url>, starting from the top, left of the original
image as long as arrow.png is a supported image, otherwise a solid
red swatch. If language is rtl, the image will be horizontally flipped. */
cross-fade(20% url("twenty.png"), url("eighty.png"))
/* cross faded images, with twenty being 20% opaque
and eighty being 80% opaque. */
image-set("test.jpg' 1x, 'test-2x.jpg" 2x)
/* a selection of images with varying resolutions */
無效影像
css
"no-url.jpg" /* An image file must be defined using the url() function. */
url("report.pdf") /* A file pointed to 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("cat.jpg" 1x, "dog.jpg" 1x) /* every image in an image set must have a different resolution */
規範
| 規範 |
|---|
| CSS 影像模組第三級 # image-values |
瀏覽器相容性
載入中…