uni-app css之background属性说明

• background-color
• background-position
• background-size
• background-repeat
• background-image
• background-origin
• background-clip
• background-attachment

1.background-color : 设置元素的背景颜色

  有三种格式：

（1）.background-color:yellow;

（2）.background-color:#00ff00;

（3）.background-color:rgb(255,0,255);

2.background-position ： 背景图像的起始位置（定位）

相对于布局

• top  //上
• bottom  //下
• left  //左
• right  //右
• top left  //上左
• top center  //上中间
• top right  //上右
• center left  //中左
• center center  //正中间
• center right  //中右
• bottom left  //下左
• bottom center  //下中
• bottom right  //下右

3.background-size ：规定背景图像的尺寸

（1）.设置背景图像的高度和宽度 如：background-size:75px 75px;  background-size:75px; background-size:50%; （注：当参数只有一个时，第二个就是默认的auto）

（2）.cover ：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

（3）.contain ：根据图像的快高比，最大化适配铺满短边的区域

4.background-repeat ：设置是否重复背景图像。

5.background-image ：设置背景图像。例如：background-image:url(“图片路径”);

6.background-origin ：属性相对于什么位置来定位。

 7.background-clip ：属性规定背景的绘制区域。

 8.background-attachment ：设置背景图像是否固定或者随着页面的其余部分滚动。

二、社会中一个背景图片实例

效果图：