微信小程序背景与微信小程序背景颜色相关设置

2017年，微信小程序背景已经是当下微信小程序设计中最热门的话题，下面将从多方面来谈谈微信小程序背景及小程序背景图设置相关的内容。

一：背景(Background)与颜色(Color)

一、背景：background。设置对象的背景特性。一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后面背景图上。

1.background-color：指定背景的颜色。取值：正常的颜色取值。

2.background-image：背景图片。如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文本颜色有一定的对比度

3.background-repeat：设置对象背景图如何铺排填充。

repeat-x：背景在横向上平铺。

repeat-y：背景在纵向上平铺。

repeat：背景图在横向纵向上平铺。

no-repeat：图像不平铺。

round：背景图像自动缩放直到适应且填充整个容器。

space：背景图像以相同的间距平铺且填充满整个容器或者某个方向。

space:

round:

4.background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。

取值：fixed：固定位置。scroll：相对于元素固定，跟着元素。local：相对于元素内容固定，总是跟着内容。

5.background-position:指定对象的背景图像位置。

取值：left，right，top，bottom，center。也可以用百分比。

6.background-size：指定对象的背景图像的尺寸大小。

取值：auto：背景图的真实大小。cover：等比例缩放到完全覆盖容器。有可能超出容器。

contain：将背景图等比例缩放到宽度或者高度与容器的宽度或者高度相等，始终都在容器内。

7.background-clip：指定对象的背景图像向外裁剪的区域。

取值：padding-box：从padding区域(不含padding)开始向外裁剪背景。

border-box：从border区域(不含border)开始向外裁剪背景。

content-box：从content 区域开始向外裁剪背景。

text：从前景内容的形状做为裁剪区域向外裁剪。

8.background-origin：指定对象的背景图像显示的原点。

取值：padding-box：从padding区域(不含padding)开始向外裁剪背景。

border-box：从border区域(不含border)开始向外裁剪背景。

content-box：从content 区域开始向外裁剪背景。