微信小程序怎样加背景图片

angryTom
发布: 2020-03-23 11:29:21
原创
25000 人浏览过

经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢?

微信小程序怎样加背景图片

微信小程序怎样加背景图片    

以下总结了三种方法:

1、wxss中通过background-image设置网络图片来添加背景图片

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

推荐学习:小程序开发

background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)
登录后复制

2、将图片转为Base64编码格式,然后使用background-image来添加背景图片;

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

3、利用流布局,设置z-index层级,将image标签置于底层来添加背景图片。

//html
<view class="container">
  <image src=&#39;../image/1.jpg&#39;></image>
  <view class=&#39;up&#39;>
    我是一串字符串
  </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;
}
登录后复制

PHP中文网,大量网站建设教程,欢迎学习!

以上是微信小程序怎样加背景图片的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板