微信小程序开发背景图显示功能
更新时间：2018年08月08日 08:42:29 作者：西岭千秋雪
这篇文章主要介绍了微信小程序开发--背景图显示,需要的朋友可以参考下
这两天开发微信小程序，在设置背景图片时，发现在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;
}
显示结果：
总结
以上所述是小编给大家介绍的微信小程序开发背景图显示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Bootstrap实现的表格合并单元格,涉及bootstrap界面布局相关操作技巧,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了JavaScript定义及输出螺旋矩阵的方法,简单描述了螺旋矩阵的概念、原理并结合实例形式分析了javascript定义与输出螺旋矩阵的具体操作技巧,需要的朋友可以参考下2017-12-12
JavaScript判断变量是否为undefined的两种写法区别
这篇文章主要是对JavaScript判断变量是否为undefined的两种写法区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JavaScript生成指定范围随机数和随机序列,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
在web开发过程中表单验证是比较常见的需求，友好的错误提示能够用户带来极好的用户体验效果，今天小编给大家带来如何使用bootstrap 表单验证功能，一起看看吧2017-01-01
这篇文章主要为大家详细介绍了JavaScript如何利用el-table实现绘制热度表，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-03-03
这篇文章主要介绍了如何使用JavaScript创建实时数据可视化图表,我们将使用流行的图表库,如Chart.js,来展示如何将实时数据动态呈现在图表中,感兴趣的可以了解下2024-01-01
本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家介绍了js常用的方法示例梳理总结及功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了js操作cookie保存浏览记录的方法,涉及JavaScript使用cookie记录并保存用户浏览网页信息的实现技巧,需要的朋友可以参考下2015-12-12
最新评论