files/zh-cn/web/guide/css/scaling_background_images/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

---
title: 缩放背景图像
slug: Web/Guide/CSS/Scaling_background_images
tags:
  - Advanced
  - CSS
  - CSS Background
  - Graphics
  - Guide
  - Web
  - 背景图片
translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
---
<div>{{cssref}}</div>

<p><span style="line-height: 1.5;">CSS 的 </span> {{ cssxref("background-size") }}<span style="line-height: 1.5;"> 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。</span></p>

<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">拼一张大图</h2>

<p><span style="line-height: 1.5;">来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里</span>（出于某种原因，很可能是某个非常糟糕的网站设计）<span style="line-height: 1.5;">，最终的效果如下：</span></p>

<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p>

<p>用下面的 CSS 可以实现这种效果：</p>

<pre class="brush: css;  highlight:[8]">.square {
  width: 300px;
  height: 300px;
  background-image: url(fxlogo.png);
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
  background-size: 150px;
} </pre>

<div>没必要再用带前缀的 background-size 了，<span style="line-height: 1.5;">尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。</span></div>

<h2 id="Stretching_an_image" name="Stretching_an_image">拉伸图片</h2>

<p>你可以同时指定图片纵向和横向的大小，如下：</p>

<pre class="brush:css">background-size: 300px 150px;
</pre>

<p>结果会是这样的：<br>
 <img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p>

<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">放大图片</h2>

<p>另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：</p>

<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p>

<pre class="brush: css; highlight:[5]">.square2 {
  width: 300px;
  height: 300px;
  background-image: url(favicon.png);
  background-size: 300px;
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}
</pre>

<p>正如你所看到的，CSS 的写法实际上是基本相同的。</p>

<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特殊值:  "contain" 和 "cover"</h2>

<p>除了{{cssxref("&lt;length&gt;")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。</p>

<h3 id="contain" name="contain"><code>contain</code></h3>

<p><span style="line-height: 1.5;">contain 值指定可以不用考虑容器的大小，</span><span style="line-height: 1.5;">把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域</span><span style="line-height: 1.5;">。</span><span style="line-height: 1.5;">在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，</span><span style="line-height: 1.5;">来看看下方这个例子。</span></p>

<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
  &lt;p&gt;Try resizing this window.<code>Right-click-&gt;This Frame-&gt;Open Frame in New Tab</code>&lt;/p&gt;
&lt;/div&gt;</pre>

<pre class="brush:css;highlight:[4]">.bgSizeContain {
  height: 200px;
  background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
  background-size: contain;
  border: 2px solid darkgray;
  color: #000; text-shadow: 1px 1px 0 #fff;
}</pre>

<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>

<h3 id="cover" name="cover"><code>cover</code></h3>

<p><span style="line-height: 1.5;">cover 属性指定背景图可以被调整到任意大小，</span><span style="line-height: 1.5;">以使背景图完全覆盖背景区域</span><span style="line-height: 1.5;">。</span></p>

<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
  &lt;p&gt;Try resizing this window.Right-click-&gt;This Frame-&gt;Open Frame in New Tab&lt;/p&gt;
&lt;/div&gt;</pre>

<pre class="brush:css;highlight:[4]">.bgSizeCover {
  height: 200px;
  background-image: url('/files/2917/fxlogo.png');
  background-size: cover;
  border: 2px solid darkgray;
  color: #000;
  text-shadow: 1px 1px 0 #fff;
}</pre>

<p>{{ EmbedLiveSample("cover", "100%", "220") }}</p>

<h2 id="See_also" name="See_also">另请参阅</h2>

<ul>
 <li>{{ cssxref("background-size") }}</li>
 <li>{{ cssxref("background") }}</li>
</ul>