背景大小比率css,背景大小：background-size - CSS3 | 绿叶学习网

在CSS2.1中，我们是不能使用CSS来控制背景图片大小的，背景图片的大小都是由图片实际大小决定。

在CSS3中，我们可以使用background-size属性来定义背景图片的大小，这样可以使得同一张背景图片可以在不同的场景重复使用。

语法：

background-size:取值;

说明：

background-size属性取值有两种：一种是长度值，如px、em、百分比等；另外一种是使用关键字，如下表所示。

background-size关键字取值

属性值

说明

cover

即“覆盖”，表示将背景图片等比缩放来填满整个元素

contain

即“容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止

这是一张大小为120px×80px的图片，这一节的例子都使用它作为背景图片。

举例：background-size取值为“长度值”

{

width:160px;

height:100px;

border:1px solid red;

margin-top:10px;

background-image:url(img/battle.png);

background-repeat:no-repeat;

}

#div2{background-size:160px 100px;}

浏览器预览效果如下图所示。

分析：

在这个例子中，第1个div元素背景图片大小使用默认值(即图片实际大小)，而第2个div元素使用background-size属性重新定义背景图片大小。

其中，background-size:160px 100px;表示定义背景图片的宽度为160px，高度为100px。

举例：background-size取值为“关键字”

{

width:160px;

height:100px;

border:1px solid red;

margin-top:10px;

background-image:url(img/battle.png);

background-repeat:no-repeat;

}

#div2{background-size:cover;}

#div3{background-size:contain;}

浏览器预览效果如下图所示。

分析：

在这个例子中，第1个div元素没有使用background-size属性，第2个div元素background-size属性取值为“cover”，第3个div元素background-size属性取值为“contain”。小伙伴们对比理解一下。

常见问题：

1．对于背景图片的大小，不是可以使用width和height这两个属性来定义吗？为什么还要增加一个background-size属性呢？

大家一定要搞清楚，背景图片跟普通图片(即img标签)是不同的东西！width和height这两个属性只能用来定义img标签图片的大小，是不能用于控制背景图片的大小。