1、微信小程序设置本地图片为背景图片不显示
遇到的问题:
在开发小程序的时候,设置本地图片为背景图片的时候,发现编辑器可以显示出来,但是在真机上运行的时候却不能显示。
具体的原因:
经过查资料发现,background-image
只能用网络url或者base64图片编码,本地图片只能用 image标签src属性才行。
当然 image标签src属性也可以使用网络url或者base64图片编码。
解决办法:
<div :style="{backgroundImage:'url(https://icdn1.bangnijiao.com/evaluation/evaluationbg.png)'}"></div>
2、button的默认背景颜色和边框
遇到的问题:
由于微信小程序button本身就自带样式,所以需要对button进行清除。
解决办法:
1、CSS清除默认
.button-hover {
background-color:transparent!important;//背景颜色设置为透明
}
button::after{
border: none;
}
2、html通过img添加背景图片
<button>
<img :src='confirmbtn'>
</button>