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


Posted in Javascript onAugust 08, 2018

这两天开发微信小程序,在设置背景图片时,发现在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;
}

显示结果:

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

总结

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

Javascript 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
微信小程序支付前端源码
Aug 29 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 #Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 #Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 #Javascript
详解如何在vue-cli中使用vuex
Aug 07 #Javascript
React styled-components设置组件属性的方法
Aug 07 #Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 #Javascript
详解vue axios用post提交的数据格式
Aug 07 #Javascript
You might like
php桌面中心(一) 创建数据库
2007/03/11 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
详解php反序列化
2020/06/10 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
python编程实现希尔排序
2017/04/13 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python守护进程实现过程详解
2020/02/10 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
行政部总经理岗位职责
2014/01/04 职场文书
上班迟到检讨书
2014/01/10 职场文书
会计岗位描述
2014/02/22 职场文书
利群广告词
2014/03/20 职场文书
体育专业自荐书
2014/05/29 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
科学育儿宣传标语
2014/10/08 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python