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


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 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
小程序实现图片移动缩放效果
May 26 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文本操作类
2006/11/25 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
医学毕业生自我鉴定
2013/10/30 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
环保专项行动方案
2014/05/12 职场文书
党员一帮一活动总结
2014/07/08 职场文书
公司租房协议书
2014/10/14 职场文书
电话营销开场白
2015/05/29 职场文书
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python