先来看一段样式,在wxss中
page{ background-color: cadetblue; background-image: url(../../../image/weixin_logo.png); background-repeat:repeat-x; background-position-y: top; }
注意,page前面并没有小数点,而且也不用被调用,它会自动被框架调用,使用里面的属性来设置当前页面。
效果图如下:
设置背景色,这里设置的是界面的背景色,也可以是设置组件的背景色。既可以直接使用色值,如#ffffff,也可以使用小程序中内置的一些设置了别名的色值,如上面的cadetblue。
设置背景图片,使用url(../../../image/weixin_logo.png),将图片地址当参数传入即可。
背景图片的重复类型,有以下几个值
round(左)和space(右)的区别如下图
background-repeat属性必须放在background-image属性后面,如果放在它的前面,background-repeat就不起作用。
设置背景图在x方向上的位置:background-position-x
设置背景图在y方向上的位置:background-position-y
设置背景图的位置:background-position
注意,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个值可供选择
3个属性的效果图如下,auto(左),contain(中),cover(右)
background-clip属性,有3个值
<view class="demo-view-2"> <image class="image-1" src="{{urll}}"></image> </view>
.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-origin设置背景图像的起点,有3个可选值
<view class="demo-view-2"> <image class="image-1"></image> </view>
.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; background-origin: padding-box; }