CSS 的 background-size 属性能调整背景图片的大小,从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。
拼一张大图
来考虑一张大图,一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里(出于某种原因,很可能是某个非常糟糕的网站设计),最终的效果如下:
用下面的 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;
结果会是这样的:
放大图片
另一方面,你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px:
.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; }