微信小程序背景图片

[code].backpicture{
width:100%;
height: 250rpx;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524997977864&di=34994cfd234a57759aa5ab9cdde3bffa&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F038ceb855deb9790000015995eebd72.jpg)no-repeat;  /*只能用网络地址*/
background-size: cover;
/*层叠布局*/
z-index: 0;
/*相对位置，这样其他view就能用绝对位置覆盖上去*/
position: absolute;
}

 

[code]<view class = 'backpicture'>
背景图片
</view>

 

图片网络地址获取方法

右击图片点击复制图片地址

 

自己上传的图片也可以

点击上传图片就可以看到上传的那张图片的地址了

 

复制进去

 

[code]背景图片的显示方式：
当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，

当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，[/code]

 

[code]repeat :     默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x :    背景图像仅在横向上平铺
repeat-y :    背景图像仅在纵向上平铺

[code]加上
.backpicture{
background-repeat:no-repeat
}

background-position： center|left|right|top|bottom

 

阅读更多