先来看一段样式在wxss中
page{ background-color: cadetblue; background-image: url(../../../image/weixin_logo.png); background-repeat:repeat-x; background-position-y: top; }注意page前面并没有小数点百度seo优化软件page前面并没有小数点而且也不用被调用它会自动被框架调用使用里面的属性来设置当前页面。
效果图如下：
background-color设置背景色这里设置的是界面的背景色也可以是设置组件的背景色。既可以直接使用色值如#ffffff也可以使用小程序中内置的一些设置了别名的色值如上面的cadetblue。
background-image设置背景图片使用url(../../../image/weixin_logo.png)将图片地址当参数传入即可。
background-repeat背景图片的重复类型有以下几个值
repeat-x在x方向上重复
repeat-y在y方向上重复
no-repeat不重复
repeat在x和y方向重复这是默认值
round背景图自动缩放直到适应且填充整个容器。
space背景图片以相同间距平铺且填充满整个容器或者某个方向
round（左）和space（右）的区别如下图
background-repeat属性必须放在background-image属性后面如果放在它的前面background-repeat就不起作用。
background-positionbackground-position-xbackground-position-y设置背景图在x方向上的位置：background-position-x
数值
left
right
center
设置背景图在y方向上的位置：background-position-y
数值
top
bottom
center
设置背景图的位置：background-position
数值比如直接写background-position:200rpx 100rpx;意思就是在x轴上偏移200rpx在y轴上偏移100rpx。如果只写了一个值比如：background-position:200rpx；那么在x轴上偏移200rpxy轴上居中。
别名background-position:right top;意思是x轴上居最右边y轴上居最上面如果不设置第2个则只在x轴上变化位置y轴上居中。第1和第2个分别对应x和y方向。
注意background-position的2个参数值之间用空格分割并不是逗号
再来看一下其它的background属性先看background-size
page{ background-color: cadetblue; background-image: url(../../../image/weixin_logo.png); background-repeat:no-repeat; background-size: auto; }
background-size属性用来设置背景图片的尺寸大小有3个值可供选择
auto默认值显示背景图的真是大小
contain营销型网站建设显示背景图的真是大小
contain将背景图等比缩放宽度或高度使之与容器的宽度或高度相等整张图始终在容器内。
cover等比缩放图片直图片完全覆盖容器有可能超出容器。
3个属性的效果图如下auto（左）contain（中）cover（右）
background-clip属性有3个值
padding-box从padding区域（不含padding）开始向外裁剪背景
border-box从border区域（不含border）开始向外裁剪背景
content-box从content 区域开始向外裁剪背景
text从前景内容的形状做为裁剪区域向外裁剪。
<view class="demo-view-2"> <image class="image-1" src="{{urll}}"></image> </view>1
2
3
1
2
3
.demo-view-2{ background-color: darkblue; height: 1050rpx; display: flex; align-items: center; justify-content: center; } .image-1{ background-image:url(../../../image/weixin_logo.png); background-repeat: no-repeat; border-radius: 50%; width: 200rpx; height: 200rpx; background-color: white; padding: 100rpx; background-clip:border-box; }下图是运行效果padding-box（左）content-box（中）border-box（右）
比较容易看出content-box的意思。padding-box和border-box不知道有什么区别。
在写background-image时之前里面有一个background属性放在它前面后面的background会把前面的background-image洗掉。
background-originbackground-origin设置背景图像的起点有3个可选值
padding-box从padding区域原点（左上角）开始绘制背景图像
border-box从border区域原点（左上角）开始绘制背景图像