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


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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
React简单介绍
May 24 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php获取apk包信息的方法
2014/08/15 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
JavaScript this 深入理解
2009/07/30 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
Bootstrap精简教程
2015/11/27 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python文字转语音的实例代码分析
2019/11/12 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
幼教简历自我评价
2014/01/28 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
材料化学专业求职信
2014/07/15 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
休学证明范本
2015/06/19 职场文书
python tkinter实现定时关机
2021/04/21 Python