CSS3基础背景尺寸属性background-size的取值效果

背景尺寸属性background-size的取值效果

CSS3中的background-size属性规定背景图片的尺寸,该属性有以下几种设置方法:

background-size:400px 300px 这表示设置背景图片的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto",和图片的尺寸定义类似。

background-size:90% 80% 这表示以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

background-size:cover 这表示把背景图片扩展至足够大,使图片完全覆盖背景区域。这种情况下背景图片可能有一部分无法显示在区域中。

background-size:contain 这表示把图片扩展或拉伸至最大尺寸,以使其宽度和高度完全适应内容区域。

我们来创建一个具有背景图片的框试试这几种定义的区别,这里我们随便准备了一张图片用于测试:

tvb.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {background:#000 url(tvb.jpg) no-repeat center;
padding:0px;margin:50px;
border:10px solid #666;
width:533px;height:300px;
}
</style>
</head>
<body>
<div id="a1">
</div>
</div>
</body>
</html>

我们给div框定义了一个不重复的背景图片,并定位在中间,浏览这个网页,大家可以看到,背景图片以原始尺寸显示,所以被截取了一部分:

背景尺寸1.png

如果我们把这个div框当作一台电视机,那么此时的“电视节目”尺寸超出了“屏幕”,下面我们给这个“电视节目”加上尺寸:

div {background-size:533px 300px;}

通过以上定义,将背景图片的尺寸设置为和div框的尺寸相同,浏览后发现,“电视机”里的画面刚好“全屏显示”了。

背景尺寸2.png

刚刚说道cover值的作用是将背景图片覆盖整个区域,我们来试一下将以上定义的宽高值改为cover:

div {background-size:cover;}

我们发现定义了cover值之后,“电视画面”完全填充了整个“屏幕”,但没有改变宽高比例,因此部分“画面”超出了“屏幕”:

背景尺寸4.png

接下来我们将以上的background-size值修改为contain来试试效果,也就是:

div {background-size:contain;}

我们发现定义了该属性后,“电视画面”自动缩放至整个“屏幕”,但没有改变宽高比例,因为“画面”比例与“电视屏幕”的比例不一致,因此“屏幕”上留有黑边。

背景尺寸5.png

通过以上测试我们发现了background-size的几个值有着细微的差别,这与我们平时在电脑上看视频有些相似,电脑的屏幕比例一般是16:9,如果我们看比例为4:3的视频,想满屏显示的话,肯定会改变画面的比例,如果不改变比例,则全屏后两侧会留有黑边。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/css3/27.html