background-size 用法详解_html/css_WEB-ITnose-html教程-PHP中文网

background-size 用法详解_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:33:52

原创

2698人浏览过

background-size属性用法详解:
此属性用来控制控制背景图片的大小，下面通过代码实例详细介绍一下此属性的用法，希望能够对需要的朋友带来一定的帮助。
background-size属性具有两个参数（在这里先不把cover和contain计算在内），参数值既可以是精确数值形式也可以是百分比形式，也可以是默认的值auto，例如:

background-size:200px 100px;background-size:50% 50%;background-size:auto;

登录后复制

下面对Background-size属性的参数做一下简单的介绍:
如果只有一个参数，那么此值用来规定背景图片的宽度，这个时候背景图片的高度值是按照宽度进行等比例缩放。
如果提供两个参数，那么第一个参数用来规定背景图片的宽度，第二个参数用来规定背景图片的高度。
代码实例如下:

<!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>

登录后复制

Background-size属性带有两个参数，第一个参数规定背景图片的宽度为200px，第二个参数规定背景图片的高度为100px。
再看一段代码实例:

<!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>

登录后复制

以上代码中，Background-size属性之规定了一个参数，那么这个参数用来规定背景图片的宽度，背景图片的高度根据宽度值进行等比例缩放，如果背景图片的尺寸超过容器，将会被裁切。
Background-size属性值如果是auto的时候，就是背景图片按照原尺寸显示，这里就不用实例演示了。
下面再来介绍一下此属性的cover和contain属性值。
一.cover属性:
将属性值设置为cover之后，将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，不过超出的部分将会被裁切。
cover的英文也有覆盖的意思，说这一点就是有助于大家的记忆和理解。
代码实例如下:

<!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;   background-repeat:no-repeat; } </style> </head> <body> <ul>   <li class="test"></li>  </ul> </body> </html>

登录后复制

在以上代码中，背景图片可以最小程度的完全覆盖容器，如果背景图片的和容器的长宽比例不一样，那么必然会出现在横向或者纵向上超出容器的情况，那么超出的将会被隐藏。
一.contain属性:
此属性值可以将背景图片放大或者缩小。
和cover属性类似，都是可以将图片等比例放大或者缩小，但是cover是最小限度的将容器的覆盖，而contain只是要求某一个方位上将容器覆盖，比如纵向或者横向能够最小程度将容器覆盖。
代码示例如下:

立即学习“前端免费学习笔记（深入）”；

<!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>

登录后复制

在以上代码中，背景图片进行了等比例缩放，由于在纵向上能够最先达到填充容器元素，所以在横向上就放弃尝试。

原文地址是:background-size 用法详解一章节。