您现在的位置是:群英 > 开发技术 > 移动开发
小程序设置背景图片用不了怎么办
Admin发表于 2022-05-06 18:10:101536 次浏览
这篇文章给大家分享的是“小程序设置背景图片用不了怎么办”,文中的讲解内容简单清晰,对大家认识和了解都有一定的帮助,对此感兴趣的朋友,接下来就跟随小编一起了解一下“小程序设置背景图片用不了怎么办”吧。

 


 


前言:

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

解决方案:

1、使用网络图片

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

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

2、利用base64格式的图片

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

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

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

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

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

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

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

看代码

wxml:

<view class = "login-box" >
   //本地图片
  <image src='../../../static/images/login_bg.png'></image>
</view>

wxss:

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

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


通过以上内容的阐述,相信大家对“小程序设置背景图片用不了怎么办”已经有了进一步的了解,更多相关的问题,欢迎关注群英网络或到群英官网咨询客服。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

相关信息推荐
2022-04-28 17:44:24 
摘要:去掉input边框的方法:1、使用style属性设置“border: 0;”样式;2、使用style属性设置“border-style: none;”样式;3、使用style属性设置“border: transparent;”样式。
2022-09-06 17:49:44 
摘要:本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于windows对象的常见事件的相关问题,window对象是浏览器的顶级对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法,下面一起来看一下,希望对大家有帮助。
2022-05-06 17:58:16 
摘要:本篇文章给大家带来了关于Python的相关知识,其中主要介绍了Python怎么操作XML文件的相关问题,包括了XML基础概述,Python解析XML文件、写入XML文件、更新XML文件等内容,下面一起来看一下,希望对大家有帮助。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部