uniapp微信小程序css中background-image失效问题

项目场景:

提示:这里简述项目相关背景:

在用uniapp做微信小程序的时候,需要一张背景图,用的是当时做app的时候的框架,但是,在class的样式中background-image失效了,查了后才知道,微信小程序不支持在class中使用background-image,但是可以在标签中使用,而且需要图片路径是base64编码格式的。


解决方案:

提示:这里填写该问题的具体解决方案:

1:图片转换base64编码的工具

javascript 复制代码
npm i image-tools --save

//引入使用
import { pathToBase64, base64ToPath } from 'image-tools'

2:使用函数进行转换

javascript 复制代码
//this.imgUrl 图片路径 /static/img/bg1.png
pathToBase64(this.imgUrl).then(res=>{
    this.bgImgBase64=res
})

3:在标签中使用

html 复制代码
//width height 要设置 
/*
background-attachment 属性值说明
background-attachment 属性有三个主要的可选值,每个值对应不同的效果:
scroll:默认值,背景图像会随着页面内容滚动。
fixed:背景图像固定在视窗中,不会随页面滚动。
local:背景图像与元素内容一起滚动,但仅限于该元素的滚动区域内。
*
/

<view 
	:style="{
		width:'100%',
		height:'100%',
		backgroundImage:'url('+bgImgBase64+')',
		backgroundRepeat: 'no-repeat',
		backgroundPosition: 'center',
		backgroundSize: '100% 100%',
		backgroundAttachment: 'fixed',
	}"
	class="index-content">
......
</view>

4:效果图

相关推荐
The_era_achievs_hero1 小时前
UniappDay03
vue.js·微信小程序·uni-app
伍哥的传说12 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
游戏开发爱好者817 小时前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
结城19 小时前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..19 小时前
网络安全第三次作业
前端·css·html
小白阿龙20 小时前
如何实现缓存音频功能(App端详解)
前端·css·html5
smile boy20 小时前
个人财务记录应用
前端·javascript·css·css3·html5
Python大数据分析21 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖1 天前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲2 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app