您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 background-size

2018-7-21 01:31| 作者: admin| 查看: 1097| 评论: 0|来自: 蚂蚁部落

CSS3属性相较而言,比CSS2属性掌握起来稍稍难一点,但是以人类的智商掌握它们还是很轻松的。

为了更加轻松的掌握并熟练的使用它们,学习方式也是很重要的。

background-size是单词background和size的组合体,属性的命名和它的功能有直接的联系。

由此,我们很自然的联想到,此属性是用来控制背景图片大小的,事实也的确如此。

语法结构:

[CSS] 纯文本查看 复制代码
background-size: length|percentage|cover|contain;

属性值既可以是精确数值也可以是百分比,也可以是auto(默认)。

cover和contain属性值是固定的,后面会有专门例子演示。

代码片段如下:

[CSS] 纯文本查看 复制代码
background-size:200px 100px;
background-size:50% 50%;
background-size:auto;

(1).只有一个参数,规定背景图片的宽度,此时背景图片的高度是按照宽度进行等比例缩放。

(2).两个参数,第一个规定背景图片宽度,第二个规定背景图片的高度。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  width:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
} 
.test{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:200px 100px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="test"></li>  
</ul> 
</body> 
</html>

上述代码规定两个参数,第一个规定背景图片的宽度为200px,第二个参数规定背景图片的高度为100px。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  width:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
  margin-top:10px;
} 
.first{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:200px; 
  background-repeat:no-repeat; 
} 
.second{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:600px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="first"></li>  
  <li class="second"></li>  
</ul> 
</body> 
</html>

只规定一个参数,这时此参数规定背景图片的宽度,高度根据宽度值等比缩放,如果背景图片的尺寸超过容器,将会被裁切。

如果属性值是auto,那么背景图按照原尺寸显示。

一.cover属性值:

cover翻译成中有“覆盖”的意思。

属性值设置为cover,背景图片等比缩放至完全覆盖容器,超出容器的尺寸将会被裁切。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  width:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
  margin-top:10px;
} 
.test{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:cover; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="test"></li>  
</ul> 
</body> 
</html>

背景图片完全覆盖容器,如果背景图片长宽比喻容器的长宽比不同,必然会出现横向或者纵向上超出容器的情况,超出的将会被隐藏。

二.contain属性值:

与cover属性值类似,也可以将图片等比例放大或者缩小,不同点如下:

(1).cover是最小限度的将容器的覆盖。

(2).contain只要求某一个方位上将容器覆盖,比如纵向或者横向能够最小程度将容器覆盖。

代码示例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  width:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
  margin-top:10px;
} 
.test{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:contain; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="test"></li>  
</ul> 
</body> 
</html>

背景图片进行等比例缩放,由于在纵向上最先达填充完容器元素,所以在横向上就放弃尝试。

2

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

上一篇:CSS3 box-sizing下一篇:CSS3 background-clip

最新评论

返回顶部