initial commit

1 files changed, 207 insertions, 0 deletions

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: <image>
+slug: Web/CSS/image
+tags:
+  - CSS图像
+  - CSS图像数据类型
+  - CSS数据类型
+translation_of: Web/CSS/image
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="综述：">综述：</h2>
+
+<p>CSS的&lt;image&gt;数据类型描述的是2D图形。在CSS中有两种类型的图像：简单的静态图像，经常被一个在使用的URL引用，动态生成的图像，比如DOM树的部分元素样式渐变或者计算样式产生。</p>
+
+<p>CSS可以处理以下情形中的不同类型图像：</p>
+
+<ul>
+ <li><em>具有固有尺寸</em>（大小）的图像，即图像具有自己的原始尺寸（大小），比如一个jpeg格式的图像有他自己的固有尺寸（大小）；</li>
+ <li>图像具有多个固定尺寸，可在一个文件中存在多个不同版本的<em>尺寸，</em>比如有些.ico格式的图像。在这种情况下，图像表现出来的固有尺寸将是这些尺寸较大的一个，也就是最接近外层包含它的容器纵横比的那个图像；</li>
+ <li><em>没有固定大小</em>但有固定纵横比的图像，像一些矢量图形，比如SVG格式的图像；</li>
+ <li><em>没有固定大小也没有固定宽高比</em>的图像，比如CSS渐变（图像）；</li>
+</ul>
+
+<p>CSS确定一个图像对象实际尺寸的依据有三条：(1)图像的原始尺寸；(2)用CSS属性指定的宽和高，比如{{ cssxref("width") }}, {{ cssxref("height") }} or {{ cssxref("background-size") }}中，(3)图像对象默认大小，由图像使用用途的属性类型决定：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>图像对象类型</th>
+   <th>默认的图像对象尺寸</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ cssxref("background-image") }}</td>
+   <td>DOM元素的背景定位的范围尺寸（大小）</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("list-style-image") }}</td>
+   <td> 字符的<code>1em尺寸（大小）</code></td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("border-image") }}</td>
+   <td>DOM元素的边框图像范围尺寸（大小）</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("cursor") }}</td>
+   <td>浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸</td>
+  </tr>
+  <tr>
+   <td>用 CSS {{ cssxref("content") }}属性，和CSS伪元素 {{ cssxref("::after") }} 和 {{ cssxref("::before") }}替换元素内容</td>
+   <td>一个<code>300px</code><code> × 150px</code> 矩形</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>图像对象的实际尺寸计算算法如下：</p>
+
+<ul>
+ <li>如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；</li>
+ <li>如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；</li>
+ <li>如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小（翻译可能会有误，求大神快来翻译）；</li>
+</ul>
+
+<p>图像可以使用很多CSS属性，比如 {{ cssxref("background-image") }}, {{ cssxref("border-image") }}, {{ cssxref("content") }}, {{ cssxref("list-style-image") }} 和{{ cssxref("cursor") }}；</p>
+
+<div class="note"><strong>提示:</strong> 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看<a href="/en-US/docs/Web/CSS/image#Browser_compatibility">浏览器兼容性</a>了全面的条目列表</div>
+
+<h2 class="note" id="语法">语法</h2>
+
+<p>一个&lt;image&gt;CSS数据类型可能表示成如下几种类型：</p>
+
+<ul>
+ <li>一个图像被引用为CSS {{cssxref("&lt;url&gt;")}}数据类型使用url()方法；</li>
+ <li>一个CSS{{cssxref("&lt;gradient&gt;")}};</li>
+ <li>页面的一个部分，定义在{{ cssxref("element", "element()") }}方法中；</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<p>以下是有效的图像引用值：</p>
+
+<pre>url(test.jpg)                          url()方法, 只要test.jpg是图像文件
+linear-gradient(to bottom, blue, red)  一个 &lt;gradient&gt;标签
+element(#colonne3)                     页面的一部分, 使用了element()方法,
+                                       如果 colonne3 是存在于页面中的一个元素id即可
+</pre>
+
+<p>以下是无效的图像引用值：</p>
+
+<pre>cervin.jpg                             图像文件必须使用url()方法定义
+url(report.pdf)                        url()方法指向的文件链接必须是一个图像文件
+element(#fakeid)                       如果fakeid是一个不存在与页面的元素id
+</pre>
+
+<h2 id="Specifications" name="Specifications">规格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规格</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Images', '#image-notation', 'image()') }}</td>
+   <td>{{ Spec2('CSS3 Images') }}</td>
+   <td>
+    <p>在CSS3之前没有明确的定义出&lt;image&gt;数据类型，图像只能被定义在url()方法中。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><code>&lt;uri&gt;</code></td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;gradient&gt;</code></td>
+   <td>{{ compatVersionUnknown() }}<br>
+    limited to {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
+   <td>{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>IE 10{{ property_prefix("-ms") }}</td>
+   <td>{{ compatVersionUnknown() }}{{ property_prefix("-o") }}</td>
+   <td>{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>element()</code></td>
+   <td>4.0 (2.0) limited to {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><code>&lt;uri&gt;</code></td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+   <td>{{ compatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;gradient&gt;</code></td>
+   <td>{{ compatVersionUnknown() }}<br>
+    limited to {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>element()</code></td>
+   <td>4.0 (2.0) limited to {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="参阅：">参阅：</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using gradients">Using CSS gradients</a>, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}</li>
+ <li>{{cssxref("element","element()")}}</li>
+</ul>