网站建设报价单范本,坂田做网站多少钱,网站怎么做百度百科,logo生成器下载项目场景#xff1a;提示#xff1a;这里简述项目相关背景#xff1a;在用uniapp做微信小程序的时候#xff0c;需要一张背景图#xff0c;用的是当时做app的时候的框架#xff0c;但是#xff0c;在class的样式中background-image失效了#xff0c;查了后才知道#…项目场景提示这里简述项目相关背景在用uniapp做微信小程序的时候需要一张背景图用的是当时做app的时候的框架但是在class的样式中background-image失效了查了后才知道微信小程序不支持在class中使用background-image但是可以在标签中使用而且需要图片路径是base64编码格式的。
解决方案
提示这里填写该问题的具体解决方案
1图片转换base64编码的工具
npm i image-tools --save//引入使用
import { pathToBase64, base64ToPath } from image-tools2使用函数进行转换
//this.imgUrl 图片路径 /static/img/bg1.png
pathToBase64(this.imgUrl).then(res{this.bgImgBase64res
})3在标签中使用
//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,}classindex-content
......
/view4效果图
