CSS3 background-size

参考:http://www.w3school.com.cn/cssref/pr_background-size.asp

定义和用法


 

  background-size 属性规定背景图像的尺寸

  • 默认值: auto
  • 继承性: no
  • 版本: CSS3
  • JavaScript 语法: object.style.backgroundSize="60px 80px"

 

语法


background-size: length|percentage|cover|contain;
  • length       

设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"

 

  • percentage

以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。

  • cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

  • contain

把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

 

实例:

样式: background: url(date/1.png);

结果:

样式:background: url(date/1.png) no-repeat;

结果:

样式:background: url(date/1.png) no-repeat center center;

结果:

样式:

  1. background: url(date/1.png);
  2. background-size: 100%;

结果:

样式:

background: url(date/1.png) no-repeat center center;

background-size: 100%;

结果:

样式:

  1. background: url(date/1.png) center center;
  2. background-size: 100px 100px

结果:

样式:

  1. background: url(date/1.png);
  2. background-size: 100px 100px;

结果:

样式:

  1. background: url(date/1.png);
  2. background-size: 100% 100%;

结果:

样式:

  1. background: url(date/1.png);
  2. background-size: cover;

结果:

样式:

  1.  background: url(date/1.png) no-repeat center;
  2. background-size: contain

结果:

样式:

  1. background: url(date/1.png) center;
  2. background-size: auto

结果:

 

posted @ 2016-05-11 09:33  vs1435  阅读(205)  评论(0编辑  收藏  举报