微信小程序css设置本地背景图片

微信小程序中，直接在css中直接使用本地图片为view设置背景图片：

<style>div{width: 500px;height: 500px;}.box1{background-image: url(../../image/alltest_bag.jpg);}
</style>
<div class="box1"></div>

报错：

VM198:5 pages/allTest/allTest.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。请参考文档：https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%968 |   align-content: center;9 |   background-image: url(../../image/alltest_bag.jpg)
> 10 | }|  ^

会出现如下问题，微信小程序不能用CSS的方法加载本地图片，比如background-url(),除非你把本地图片base64化，否则只能够用image组件。如果想将图片作为背景，而且上面海排列其他的一些组件的话，需要使用定位布局了。
代码如下：
xwml:

<view class="container"><image class="bgImg" src="/images/xxx.png"></image><other-widget class="other-widget"></other-widget>  <!-- other widget希望是放在背景图片之上的 -->
</view>

wxss:

.container{position: relative;
}
.other-widget{position: absolute;
}

如果不采用定位的方法，other-widget就会按照块级元素排列在image的下边，但是如果我们采用绝对定位使other-widget脱离文档流，它就会相对于container进行定位，也就实现了在背景图片之上的效果。

1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创作的动力。
2.关注公众号【程序员成长指北】，回复「1」加入高级前端交流群！「在这里有好多前端开发者，会讨论前端、 Node等知识，互相学习」！
3.也可添加微信【ikoala520】，一起成长。

微信小程序css设置本地背景图片相关推荐

微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序实现页面加入背景图片以及调节透明度
在微信小程序中有时候需要在页面加入背景图片以及调节透明度让我们的小程序变得更加美观,以下是代码实现: 1.WXML <view class="bg" ><imag ...
微信小程序怎么设置全局背景颜色？
其实啊,这个可简单了,有手就行. 首先,打开微信小程序开发工具. 其次,找到全局配置app.json文件,修改 "navigationBarBackgroundColor": &q ...
微信小程序开发：设定背景图片
文章目录前言: 一.原因与解决方法二.其他设置背景图片的方式 1.获取网络图片 2.将图片转换成base64格式 3.使用image标签前言: 今天在开发小程序的时候用到背景图片设定功能,但请求 ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
微信小程序如何获取本地图片的网络地址
~~ 微信小程序如何获取本地图片的网络地址 ~~ 要想获取本地图片网络地址,首先得要上传到网络一般的网络上传比如QQ空间上传后右键图片获取其网络地址即可,但是小程序端可能会报错,大家可以试一试还 ...
微信小程序 php毛玻璃,微信小程序 CSS filter（滤镜）的使用示例详解
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下面 ...
同时存多个变量缓存微信小程序_微信小程序缓存（本地缓存、异步缓存、同步缓存）详解...
微信小程序缓存关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage( ...

微信小程序css设置本地背景图片

微信小程序css设置本地背景图片相关推荐

最新文章

热门文章