Css3 background-size理解

在Hhtml5 移动Web开发过程中经常用到background-size属性,但是总感觉对于这个属性的可设定值理解不确切,研究并记录。简单粗暴的理解是:cover即等比缩放至完全覆盖元素区域使背景图片超出并截取;contain即等比缩放至在元素区域能够完全显示背景图片缺失部分留空

W3c的基本介绍

  1. background-size: length|percentage|cover|contain;
描述
length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

引用W3C

自己写的测试示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Test Css3 Background-size</title>
  6. <style>
  7. .main{margin: 200px; width:1000px; height: 1000px; background-color: red;}
  8. .bg{ width: 128px; height: 128px; border: 2px solid #000; background-image: url(./eg_smile.gif); background-repeat: no-repeat; margin-bottom: 20px;}
  9. .bg1{width: 100px; height:125px; background-size: cover;}
  10. .bg2{ width: 100px; height:125px; background-size: contain;}
  11. .bg3{ width: 100px; height:125px; background-size: 100% 100%;}
  12. </style>
  13. </head>
  14. <body>
  15. <div class="main">
  16. <div class="bg bg1"></div>
  17. <div class="bg bg2"></div>
  18. <div class="bg bg3"></div>
  19. </div>
  20. </body>
  21. </html>

示例截图

  • 此例子中多了一种实际开发过程中常用的background-size:100% 100%; 的使用,这个很好理解就是使背景非等比缩放来达到与元素区域大小一致的背景。
  • 从图片中可以明显的看出cover值使背景存在截断,等价于background-size:125px 125px;
  • 而contain值使背景图片完全显示但是元素区域空出,等价于background-size:100px 100px;

写在最后

以上都是很基础的理解,但是自己经常存在模棱两可,因此有如上结论。