From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/image/index.html | 207 +++++++++++++++++++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 files/zh-cn/web/css/image/index.html (limited to 'files/zh-cn/web/css/image/index.html') diff --git a/files/zh-cn/web/css/image/index.html b/files/zh-cn/web/css/image/index.html new file mode 100644 index 0000000000..c19fb0521e --- /dev/null +++ b/files/zh-cn/web/css/image/index.html @@ -0,0 +1,207 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS图像 + - CSS图像数据类型 + - CSS数据类型 +translation_of: Web/CSS/image +--- +

{{ CSSRef() }}

+ +

综述：

+ +

CSS的<image>数据类型描述的是2D图形。在CSS中有两种类型的图像：简单的静态图像，经常被一个在使用的URL引用，动态生成的图像，比如DOM树的部分元素样式渐变或者计算样式产生。

+ +

CSS可以处理以下情形中的不同类型图像：

+ + + +

CSS确定一个图像对象实际尺寸的依据有三条：(1)图像的原始尺寸；(2)用CSS属性指定的宽和高，比如{{ cssxref("width") }}, {{ cssxref("height") }} or {{ cssxref("background-size") }}中，(3)图像对象默认大小，由图像使用用途的属性类型决定：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
图像对象类型默认的图像对象尺寸
{{ cssxref("background-image") }}DOM元素的背景定位的范围尺寸（大小）
{{ cssxref("list-style-image") }} 字符的1em尺寸（大小）
{{ cssxref("border-image") }}DOM元素的边框图像范围尺寸（大小）
{{ cssxref("cursor") }}浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸
用 CSS {{ cssxref("content") }}属性，和CSS伪元素 {{ cssxref("::after") }} 和 {{ cssxref("::before") }}替换元素内容一个300px × 150px 矩形
+ +

图像对象的实际尺寸计算算法如下：

+ + + +

图像可以使用很多CSS属性，比如 {{ cssxref("background-image") }}, {{ cssxref("border-image") }}, {{ cssxref("content") }}, {{ cssxref("list-style-image") }} 和{{ cssxref("cursor") }}；

+ +
提示: 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看浏览器兼容性了全面的条目列表
+ +

语法

+ +

一个<image>CSS数据类型可能表示成如下几种类型：

+ + + +

示例

+ +

以下是有效的图像引用值：

+ +
url(test.jpg)                          url()方法, 只要test.jpg是图像文件
+linear-gradient(to bottom, blue, red)  一个 <gradient>标签
+element(#colonne3)                     页面的一部分, 使用了element()方法,
+                                       如果 colonne3 是存在于页面中的一个元素id即可
+
+ +

以下是无效的图像引用值：

+ +
cervin.jpg                             图像文件必须使用url()方法定义
+url(report.pdf)                        url()方法指向的文件链接必须是一个图像文件
+element(#fakeid)                       如果fakeid是一个不存在与页面的元素id
+
+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态备注
{{ SpecName('CSS3 Images', '#image-notation', 'image()') }}{{ Spec2('CSS3 Images') }} +

在CSS3之前没有明确的定义出<image>数据类型，图像只能被定义在url()方法中。

+
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
<uri>{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}
<gradient>{{ compatVersionUnknown() }}
+ limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}		{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}IE 10{{ property_prefix("-ms") }}{{ compatVersionUnknown() }}{{ property_prefix("-o") }}{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}
element()4.0 (2.0) limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
<uri>{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}
<gradient>{{ compatVersionUnknown() }}
+ limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}		{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
element()4.0 (2.0) limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
+
+ +

参阅：

+ + -- cgit v1.2.3-54-g00ecf