微信小程序开发背景图显示功能
2018-08-08 08:42
921 查看
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置
background-image:(url)属性,不管是开发工具还是线上都无法显示。经过查资料发现,
background-image只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。
下面通过 image 标签src属性设置,实现背景图显示
界面结构:
<view class='set-background'> <image class='background-image' src='{{item.countryPic}}'></image> <view class='background-content'> <view class="set-background-avatar" background-size="cover"> <image class="post-specific-image" src="{{item.picture}}"></image> </view> </view> </view>
wxss样式:
.set-background { display: flex; flex-direction: column; align-items: center; height: 150px; } .set-background-avatar { width: 220px; height: 150px; } .background-content { position: absolute; z-index: 1; } .background-image{ width: 225px; height: 150px; opacity: 0.8; } .post-specific-image { width: 215px; height: 150px; vertical-align: middle; }
显示结果:
总结
以上所述是小编给大家介绍的微信小程序开发背景图显示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 微信小程序开发之radio实现显示和隐藏功能
- 微信小程序开发之radio实现显示和隐藏功能 原创 2017年07月04日 20:33:07 标签: 前端开发 / 微信 我们在开发微信小程序的时候,经常会用到显示和隐藏,
- Android程序开发之防止密码输入错误 密码明文显示功能
- 微信小程序蓝牙功能开发
- 巧用日志功能,进行微信h5支付开发,微信公众号开发,小程序支付开发错误调试——微信h5支付开发3
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
- 微信小程序开发日志2018-03-04: 实现图书管理小程序基本功能
- 微信小程序背景图片完全覆盖显示
- 微信小程序开发入门第七章:收藏、评论、点赞及计数功能
- C#开发之微信小程序发送模板消息功能
- 微信小程序开发-短信注册功能
- 十分钟掌握微信小程序开发:高仿电商产品分类功能
- 微信小程序开发新增5大功能
- 微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击
- 微信小程序显示下拉列表功能【附源码下载】
- 微信web开发者工具(小程序开发工程),打开后卡住显示黑色或白色窗口解决办法
- 一个wepy开发微信小程序时图片在真机上不显示的问题
- php--------网页开发实现微信JS的(定位,地图显示,照片选择功能)
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法
- 支付宝小程序与微信小程序开发功能和语法糖不同