CSS3之背景尺寸Background-size

àì夳堔傛蜴生んèń 2022-09-16 08:58 203阅读 0赞

CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。下面就想来看下有关CSS3 之背景尺寸Background-size的介绍吧。

**一、Background-size的语法**

**1、Background-size的语法**

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

**2、Background-size的属性值**

1、auto：此值为默认值，保持背景图片的原始高度和宽度;

2、number：此值设置具体的值，可以改变背景图片的大小;

3、percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真;

5、contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。

当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。

**二、Background-size的兼容**

**1、Background-size的兼容情况**

![梦龙小站][SouthEast]

**2、Background-size的兼容写法**

/*Mozilla*/
    -moz-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
    /*Webkit*/
    -webkit-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
    /*Oprea*/
    -o-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
    /*W3c标准*/
    background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

**三、Background-size的例子(在谷歌浏览器下看哟)**

** **

**1、图片放大缩小**

** **

CSS代码：

.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
        -webkit-transition:1s all linear;
        background-size:20px 20px;
    }
    .box:hover{
    	background-size:200px 200px;
    }

HTML代码：

***预览效果：***

(1)初始状态：

![梦龙小站][SouthEast 1]

(2)hover的状态：

![梦龙小站][SouthEast 2]

**2、图片contain和cover的效果**

*CSS代码：*

.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
    	-webkit-transition:1s all linear;
    	background-size:cover;
    }
    .box:hover{
    	background-size:contain;
    }

*HTML代码：*

***预览效果：***

(1)初始状态：

![梦龙小站][SouthEast 3]

(2)hover的状态

![梦龙小站][SouthEast 4]

CSS3之背景尺寸Background-size就为大家介绍到这里了，很简单的小属性，这只是CSS3新加的背景属性之一，更多有关CSS3的小属性尽在梦龙小站，跟多有关CSS3的其他内容欢迎大家关注梦龙小站有关CSS3的更新。

[SouthEast]: /images/20220828/05f5aacb2a904c1a9df8ba09473bfe12.png
[SouthEast 1]: /images/20220828/19a9021bad38409fbecfede2d5404afb.png
[SouthEast 2]: /images/20220828/99aa4793c4344532a5e32a7c10d9ef10.png
[SouthEast 3]: /images/20220828/421d7b736a28482dae7e5aa82f9b9d46.png
[SouthEast 4]: /images/20220828/32f3a657d914487aa1125ec13a9c2d8b.png