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


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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
餐饮加盟计划书
2014/01/10 职场文书
卫生巾广告词
2014/03/18 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
歌咏比赛口号大全
2015/12/25 职场文书