【小程序篇】样式失效

1. 小程序使用background-image无效

原因

background-image 只能用网络url或者base64图片编码 ， 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。

解决方案

1. 用image标签代替样式背景图

在需要的位置，额外添加一个image标签src即为想要的图片，将其对照父元素绝对定位，z-index:1，将其视为背景

<image src="/static/image/a.png absolute" alt="">

2. 将图片转换为base64编码

<image src="base64......" />
background-image: url("base64......");

3. 直接在标签上写入

<view style="background-image: url('/static/image/a.png')"></view>

4. 将路径改成可以直接访问的绝对路径

background-image: url("https://****.***.com/a.png");

2、设置page背景不生效

原因

page选择器在小程序和app编译中是页面的父节点，所以加上scoped限定后，会导致无法选中

解决方案

给 page 选择器，单独设置一个 style，去掉scoped就行。

<style lang="scss">
page {
  background-color: $uni-bg-color-theme;
}
</style>

<style lang="scss" scoped>
page {
  // background-color: $uni-bg-color-theme;
}
。。。其它样式。。。
</style>