files/zh-cn/web/css/background-image/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

---
title: background-image
slug: Web/CSS/background-image
tags:
  - CSS Background
  - CSS Property
  - CSS_参考
  - Reference
translation_of: Web/CSS/background-image
---
<div>{{CSSRef}}</div>

<p><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> 属性用于为一个元素设置一个或者多个背景图像。</p>

<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>

<p class="hidden">此交互实例的代码被存储于Github仓库. 如果你想对这些交互实例贡献代码, 请clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求.</p>

<p>在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。</p>

<p>然后元素的边框 <a href="/cn/CSS/border">border</a> 会在它们之上被绘制，而 {{cssxref("background-color")}} 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性{{cssxref("background-clip")}} 和 {{cssxref("background-origin")}} 中定义。</p>

<p>如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 <code>none</code>。</p>

<div class="note"><strong>注意：</strong> 即使图像是不透明的，背景色在通常情况下并不会被显示，web开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。</div>

<h2 id="语法">语法</h2>

<p>每个背景图像被明确规定为关键字 <code><a href="#none">none</a></code> 或是一个 {{cssxref("&lt;image&gt;")}} 值。</p>

<p>可以提供由逗号分隔的多个值来指定多个背景图像：</p>

<pre class="brush: css no-line-numbers notranslate">background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');</pre>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>是一个表示无背景图的关键字。</dd>
 <dt><code>&lt;image&gt;</code></dt>
 <dd>{{cssxref("&lt;image&gt;")}} 用来标记将要显示的图片. 支持<a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">多背景</a>设置，背景之间以逗号隔开.</dd>
</dl>

<h3 id="正规语法">正规语法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">示例</h2>

<p>注意星星图片部分透明且位于猫图片上方.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div&gt;
  &lt;p class="catsandstars"&gt;
    This paragraph is full of cats&lt;br /&gt;and stars.
  &lt;/p&gt;
  &lt;p&gt;This paragraph is not.&lt;/p&gt;
  &lt;p class="catsandstars"&gt;
    Here are more cats for you.&lt;br /&gt;Look at them!
  &lt;/p&gt;
  &lt;p&gt;And no more.&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p {
  font-size: 1.5em;
  color: #FE7F88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image:
      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

.catsandstars {
  background-image:
      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
      url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}
</pre>

<h4 id="运行结果">运行结果</h4>

<p>{{EmbedLiveSample('Examples')}}</p>

<h2 id="可访问性相关">可访问性相关</h2>

<p>浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要，因为屏幕阅读器不会告知用户它的存在，因而不能向用户传达任何信息。如果图像包含对理解页面总体目的至关重要的信息，则最好在文档中作出语义性地描述（describe it semantically）。</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any {{cssxref("&lt;image&gt;")}} CSS data type.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}</td>
   <td>{{Spec2('CSS2.2')}}</td>
   <td>From CSS1, the way images with and without intrinsic dimensions are handled is now described.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">此兼容性表是根据结构化数据生成的. 如果你想对这些数据做出贡献, 请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发起拉取请求。</div>

<div>{{Compat("css.properties.background-image")}}</div>

<p>[1] 如果 <code>about:config</code> 中 <code>browser.display.use_document_colors</code>  被设置为 <code>false</code>, 背景图像将不会展示.</p>

<p>[2] 当前的iOS Safari 版本 (5.0) CSS 背景属性对SVG的支持并不完善. iOS Safari (5.0)之前的版本亦是如此.</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites">Implementing image sprites in CSS</a></li>
 <li>{{HTMLElement("img")}}</li>
 <li>与图像相关的数据类型: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}</li>
 <li>与图像相关的函数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}</li>
</ul>