直播微信小程序商城_微信小程序开发布景图显示

摘要: 手机微信微信小程序开发设计情况图显示信息作用 本文关键详细介绍了手机微信微信小程序开发设计--情况图显示信息,必须的朋友能够参照下这几天开发设计手机微信微信小程序...

微信小程序开发背景图显示功能       这篇文章主要介绍了微信小程序开发--背景图显示,需要的朋友可以参考下

这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示。经过查资料发现,background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。

下面通过 image 标签src属性设置,实现背景图显示

界面结构:

 view 
 image src='{{item.countryPic}}' /image 
 view 
 view background-size="cover" 
 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;
}

显示结果:

总结

以上所述是小编给大家介绍的微信小程序开发背景图显示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888