微信小程序背景图片

.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;
}
<view class = 'backpicture'> 
背景图片
</view>

图片网络地址获取方法

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

自己上传的图片也可以

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

扫描二维码关注公众号,回复: 3397729 查看本文章

复制进去

背景图片的显示方式:
    当然,只用上面的代码,是无法表达出自己想要的效果的。因为,图片小了,就会以平铺的方式,如果是大了,为显示它,就是会出现滚动条,这样多不好。因此,我们还得多其进行显示控制,也就是要用到background-repeat,
    当然,只用上面的代码,是无法表达出自己想要的效果的。因为,图片小了,就会以平铺的方式,如果是大了,为显示它,就是会出现滚动条,这样多不好。因此,我们还得多其进行显示控制,也就是要用到background-repeat,
repeat :     默认值。背景图像在纵向和横向上平铺 
no-repeat : 背景图像不平铺 
repeat-x :    背景图像仅在横向上平铺 
repeat-y :    背景图像仅在纵向上平铺
加上
.backpicture{
background-repeat:no-repeat
}

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


 

猜你喜欢

转载自blog.csdn.net/qq_41261758/article/details/80777493