09-小程序中背景图片的处理

链接:https://www.jianshu.com/p/d26b64071b99

经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢?
以下总结了三种方法:

css中通过url获取网络图片

微信小程序中不能使用本地图片

  background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)

Base64编码格式

background-image:url(转换之后的base64字符串)

利用流布局,设置z-index层级,将image标签置于底层

//html
<view class="container">
  <image src='../image/1.jpg'></image>
  <view class='up'>
    我是一串字符串
  </view>
</view>


//css
.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.up{
  position: absolute;
  z-index: 1;
}

</article>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢?以下总结了三种方法: css中通过url...
    波叫怪阅读 82,301评论 1 6
  • 我们知道,在PC端,想在一个页面插入一张背景图,只需要如下属性即可。 在小程序里面,如此做法就行不通了,图片不但不...
    祈澈菇凉阅读 24,947评论 9 15
  • 在wxss里设置背景为本地图片是不可以的,会报错:“本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 ...
    L_18a7阅读 31,828评论 0 2
  • 在wxss文件中,使用background-image: url();设置背景图,报错,提示pages/me/me...
    崠崠阅读 66,770评论 2 6
  • 说在前面 最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,先说说关于如何解决小程序背...
    Java面试官阅读 7,515评论 0 5