css——背景属性

5. background-size

设置背景图片的尺寸；（CSS3新增属性，需要浏览器的支持，这个网站可以查询兼容性：caniuse）

通常用于在不改变图片宽高比的情况下，铺满盒子。

background-size:X Y; X和Y默认和原图 宽 高 对应，同时X Y可以是自己设定的百分比或像素

background-size:cover; 等比例缩放直到铺满X轴和Y轴；

background-size:contain; 等比例缩放直到铺满X或Y轴其中一个；

6. background-attachment

background-attachment：scroll; 默认值，背景随滚动而滚动；

background-attachment: fixed; 背景不随滚动而滚动

7. 其它不常用CSS3新增背景属性

• background-clip

  背景（颜色/图片）的显示是会延伸到border区域的，clip可以用于设置背景延伸到哪个位置，把不需要的部分剪裁掉。

  background-clip: border-box; 默认值，延伸到border位置

  background-clip: padding-box; 只延伸到padding位置，剪裁掉border部分的背景内容

  background-clip: content-box; 只延伸到内容部分，剪裁掉padding和border部分的背景内容

• background-origin

  背景的起点位置默认是border的左顶点，origin可以设置背景的起始位置。这个属性通常用来控制背景图片的起始位置，因为背景颜色不管从哪里起始都是一个颜色看不出什么变化。

  backgruond-origin: border-box; 默认值，以border左顶点作为背景起点

  background-origin: padding-box; 以padding左顶点作为背景起点

  background-origin: content-box; 以内容部分左顶点作为背景起点

• 多背景图的写法

  background:
      url("1.jpg") no-repeat right bottom, 
      url("2.jpg") no-repeat right top;

8. 背景图片和img标签对比

• 背景图片不占用content内容部分，而img标签会占用。

• 背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。

何时使用背景图片，何时使用img标签并没有一个确却的标准规定，可以根据实际情况做选择。

如果为了给盒子加底色为内容部分加背景，或者是加一些小图标项目符号等，则使用背景图片。

如果是确却的想表达一个图片信息，也希望搜索引擎能检索到对应的图片信息，则使用img标签。