如何给小程序页面加载一张背景图片

简介: 如何给小程序页面加载一张背景图片

我们知道,在PC端,想在一个页面插入一张背景图,只需要如下属性即可。

background-image: url("../images/photo.png"); 

在小程序里面,如此做法就行不通了,图片不但不会显示而且还会报错了

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

很多人都会有这样的一种感受,在一边学习一遍做项目的过程中,总会遇到很多坑,今天给大家填坑,如何给小程序页面插入一张背景图。

在网上浏览了一遍,找到了几个比较靠谱的解决方案,简单方便。

解决方案:

解决方法一:

在使用背景图片的时候用网络图片,就是用外链的形式,比如你将这张图片放到你的服务器,如:

1:用工具连接服务器

2:将桌面的图片拖入指定服务器文件夹底下

3:得到图片网络连接,添加到代码中,则可以显示背景图片

解决方法二:

将背景图片使用编码base64进行转换,可以在这个网址进行http://tool.css-js.com/base64.html 转换,如:background-image: url("转换后得到的编码文本"),如果多次使用的话可以将该值设置为全局变量,再在js文件进行引用即可;

1:打开在线图片转换平台

2:将桌面的图片导入,生成base64编码

3:将第三方平台编译过后的base64编码复制到wxss里面

// Base64 在wxss中的使用
page{
  background-image: url(""data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....");
}

4:效果如下:

缺点就是,这一大串编码太占用我们的代码空间了,鼠标要拖动许久许久,难免产生视觉疲劳。

下一章,小程序的图片的使用教程

相关文章
|
4月前
|
前端开发
网页如何设置背景图片
网页如何设置背景图片
20 3
|
3月前
|
前端开发
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
21 0
|
11月前
|
小程序 JavaScript
如何给小程序页面加载一张背景图片
如何给小程序页面加载一张背景图片
174 0
|
前端开发
css跳动文字——加载中
css跳动文字——加载中
216 0
|
Web App开发 前端开发
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
434 0
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
|
前端开发
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
211 0
【每日一更】css3 抖动文字动画
今天分享一个用 css3 的 animation 实现的一个文字抖动的动画效果
430 0
【每日一更】css3 抖动文字动画
|
Web App开发 移动开发 前端开发
用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行。
用CSS3动画,让页面动起来
|
前端开发
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
2194 0