缩放背景图像

CSS 的 background-size 属性能调整背景图片的大小,从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。

拼一张大图

来考虑一张大图,一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里(出于某种原因,很可能是某个非常糟糕的网站设计),最终的效果如下:

screenshot1.png

用下面的 CSS 可以实现这种效果:

.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;
} 
没必要再用带前缀的 background-size 了,尽管你可能考虑到要兼容一些非常老的浏览器版本,而用带前缀的写法。
 
 

拉伸图片

你可以同时指定图片纵向和横向的大小,如下:

background-size: 300px 150px;

结果会是这样的:
screenshot3.png

放大图片

另一方面,你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px:

screenshot2.png

.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;
}

正如你所看到的,CSS 的写法实际上是基本相同的。

特殊值:  "contain" 和 "cover"

除了<length> 值外,background-size 还提供了另外两个特殊的尺寸值:contain 和 cover。

contain

contain 值指定可以不用考虑容器的大小,把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域在支持背景图缩放的浏览器(比如Firefox 3.6+)中,改变这个窗口的大小,来看看下方这个在线的例子。

<div class="bgSizeContain">
  <p>Try resizing this window and see what happens.</p>
</div>
.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;
}

cover

cover 属性指定背景图可以被调整到任意大小,以使背景图完全覆盖背景区域

这个例子使用下面的 HTML 和 CSS:

<div class="bgSizeCover">
  <p>Try resizing this window and see what happens.</p>
</div>
.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;
}

另请参阅

文档标签和贡献者

 此页面的贡献者: mrstork, KikiAn, figure7, Wenbin
 最后编辑者: mrstork,