Rumah > applet WeChat > Pembangunan program mini > 小程序背景图片设置方法

小程序背景图片设置方法

王林
Lepaskan: 2021-03-02 09:45:33
ke hadapan
5015 orang telah melayarinya

小程序背景图片设置方法

前言:

一开始,打算在wxss文件中使用background-image:url()来设置背景图,但是却出现了报错了,提示:pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用标签小程序中设置区域背景图。对于在wxss文件中,存在本地资源无法获取的问题。

解决方案:

1、使用网络图片

我们可以把需要的背景图片上传到服务器上,然后使用背景图片地址。

如果我们需要动态改变背景图片,我们可以设置行内样式style绑定变量从而做到动态改变背景图片;

903da70c77536785d340f2a74925835.png

2、利用base64格式的图片

我们可以用base64的图片做到设置背景图片

在这里我推荐一个在线转换的base64图片格式的地址http://imgbase64.duoshitong.com/

选择图片会转换成base64格式的图片

91fd94d4cdb33efd756e0c24ca7a5ab.png

复制里面的代码放到background: url(base64转换的代码);这样既可做到设置背景图片也不用放到服务器上

(学习视频分享:php视频教程

3、利用image标签做到设置背景图片

思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子

看代码

wxml:

<view class = "login-box" >
   //本地图片
  <image src=&#39;../../../static/images/login_bg.png&#39;></image>
</view>
Salin selepas log masuk

wxss:

page{
 height: 100%;
 width: 100%;
}
.login-box {
  height: 100%;
}
 
image {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  z-index: -999;
}
Salin selepas log masuk

这样我们也可以做到背景图的效果。

相关推荐:小程序开发教程

Atas ialah kandungan terperinci 小程序背景图片设置方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan