CSS3之背景尺寸Background-size使用介绍

CSS3中提供了一个很方便的属性background-size，可以控制元素背景图片的尺寸和裁剪方式。在本篇攻略中，我们将细致介绍background-size的使用方法。

基本语法

background-size属性可以接受一个或两个值，分别表示图片宽度和高度。 值可以是一个有效的CSS长度值，如px、em或百分比等，也可以是cover或contain等关键词。

下面是background-size基本语法的示例：

div {
    background-size: 100px 200px; /*使用长度值指定背景尺寸 */
    background-size: cover;/*指定图片尽可能覆盖元素，但保持图片宽高比例 */
    background-size: contain; /*指定元素尽量容纳图片，但不扭曲它 */
}

使用示例

示例一：使用长度值调整背景尺寸

假如现在有下列HTML代码：

<div class="bg-img"></div>

下面这段CSS代码会让这个div元素使用50%的宽度和100%的高度来展示背景图片：

.bg-img {
    background-image: url("example.jpg");
    background-size: 50% 100%;
    background-repeat: no-repeat;
}

示例二：使用cover和contain缩放背景图片

下面这段CSS代码会让这个div元素展示一个图片，保持它的宽高比例并使图片尽可能覆盖div元素：

.bg-img {
    background-image: url("example.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

下面这段CSS代码会让这个div元素展示一个图片，使其尽量完整的显示在div元素中：

.bg-img {
    background-image: url("example.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

总结

本篇攻略我们介绍了CSS3之背景尺寸Background-size的基本语法和使用方法。通过使用这个属性可以非常便捷的控制背景图片，使其可视化效果更加精确。