CSS3之背景缩放

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。

• 一个元素可以设置多重背景图像。

• 每组属性间使用逗号分隔。

• 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

• 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

  background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
  url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
  url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

  background-origin :设置背景图像的位置区域。border-box padding-box content-box
  background-clip : 设置某个部分以外被裁减 border-box padding-box content-box