微信小程序开发背景图显示功能

更新时间：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;
}

　　显示结果：

总结

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

您可能感兴趣的文章:

微信小程序图片绝对定位(背景图片)

Cordova(ionic)项目实现双击返回键退出应用
这篇文章主要为大家详细介绍了Cordova项目实现双击返回键退出应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
这篇文章主要介绍了JS+HTML5手机开发之滚动和惯性缓动实现方法,涉及javascript结合HTML5特性控制页面元素的运动技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
babel基本使用详解
本文主要介绍了babel基本使用。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
彻底搞懂JS无缝滚动代码
彻底搞懂JS无缝滚动代码...
2007-01-01
javascript中判断json的方法总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的API或工具包，接下来跟着小编学习js中判断json的方法吧
2015-08-08
echarts折线图每段显示不同的颜色的实现
本文主要介绍了echarts折线图每段显示不同的颜色的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-09-09
JavaScript输出斐波那契数列的实现方法
斐波那契数列来源于兔子繁殖问题,所以也叫兔子序列,下面这篇文章主要给大家介绍了关于JavaScript输出斐波那契数列的实现方法,需要的朋友可以参考下
2021-06-06
javascript 贪吃蛇实现代码
最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。在学习的过程中发现使用JS实现动态效果挺有趣的。
2008-11-11
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
这篇文章主要介绍了使用JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器。需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript实现简单的Markdown语法解析器
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。本文将利用JavaScript实现简单的Markdown语法解析器，感兴趣的可以了解一下
2023-03-03