首页 > 编程语言 >微信小程序设置背景图的几种方式

微信小程序设置背景图的几种方式

时间:2023-01-31 11:56:56浏览次数:57  
标签:微信 100% base64 几种 background 背景图 image 图片

作为前端开发人员来说设置背景图那是多么简单的事,刚开始我就在wxss文件中使用background-image:url()来设置背景图片,结果保存控制台出现错误提示,如图所示:

  1.   .page {
  2.   width: 100%;
  3.   height: 100%;
  4.   background-size: 100% 100%;
  5.   position: relative;
  6.   color: #fff;
  7.   background-image: url(’../../../assets//icon-home.png);
  8.   }

 提示wxss中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。

然后我想着能不能在wxml文件引入本地图片,说干就干:

<view class="page" style="background-image: url('../assets/icon-home.png');"></view>
 

在开发工具上显示ok,结果拿着手机预览,图片显示不出来,看来这种也不行,哎只能乖乖的按那三种提示进行设置背景图片啦

1.使用网路图片:

<view class="page" style=" background-image: url('{{ossHost}}nmxy/assets/home/bg.png');"></view>
 

2.base64格式的图片,访问图片转 BASE64 编码 | 菜鸟工具上传图片生成base64

<view class="page" style=" background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RXhpZg***********************ooogD//Z');"></view>
 

3.使用<image>标签

  1.   <view class="page" >
  2.   <image src="../assets/bg.png"></image>
  3.   </view>
  1.   image {
  2.   position: absolute;
  3.   left: 0;
  4.   bottom: 0;
  5.   display: block;
  6.   width: 100%;
  7.   height: 100%;
  8.   z-index: -999;
  9.   }

 文章来自于:码书网

 

标签:微信,100%,base64,几种,background,背景图,image,图片
From: https://www.cnblogs.com/sexintercourse/p/17078520.html

相关文章

  • 微信小程序打开另一个小程序
    前言有时候,我们需要在自己的小程序中打开另一个小程序,可以使用navigateToMiniProgram这个api来实现,可以看一下api的相关参数。方案一使用之前还需要做两个准备,要打开......
  • 微信小程序获取openId
    代码如下wx.login({success(res){console.log('login',res)//获取openid需要先拿到codewx.request({url:`https://ap......
  • linux查看服务器开放的端口和启用的端口的几种方式
     文章目录nmap工具检测开放端口Nmap的扫描参数telnet查看端口是否开放curl查看链接端口是否开放nc(netcat)命令来查看远程Linux系统中某个端口是否开启n......
  • CSS 设置背景图片
    一、基本设置使用CSS可以通过以下属性设置背景图片:background-image:设置背景图片的URL。background-size:设置背景图片的大小。可以设置为绝对像素值,也可以设置......
  • 微信小程序分包
    当我们程序太大的时候,打开小程序就会比较慢,此处就需要用到分包加载,按照模块划分不同的包,让用户在需要的时候才加载对用的模块,也就是用户在进入某些页面的时候才下载该页面......
  • 微信小程序防抖
    微信小程序闭包-防抖这里主要用到闭包,将函数内的值保存下来,下次点击的时候进入判断,如果定时器启动了,则清除定时器,直到最后一次启动定时器,也就是说,在规定的时间内只会触发......
  • 微信小程序wx.navigateTo跳转参数大小超出限制问题
    微信小程序的跳转方式wx.navigateTo(Object):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页(新页面入栈)wx.redirectTo(Object):关闭当前页面,跳......
  • 微信小程序项目中使用icon图标
    效果:步骤:1、先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目2、在小程序中使用新建一个view,在上面加一个class,复制icon名字上去即......
  • 电脑微信小程序抓包
    电脑微信小程序抓包 在渗透的过程中,对于网站找不出什么漏洞的时候我们就可以,对目标进行小程序和公众号漏洞的发掘0x01设置微信代理使用Burp抓取数据包 发现我......
  • 使用微信开发者工具运行小程序代码时出现的问题
    一、问题在运行代码的时候出现未找到 app.json 的错误 二、寻找原因,尝试运行1、通过百度查找,这样的问题有很多,解决办法比较统一的为在 project.json 中添加 mini......