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


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去除数组重复值的五种不同方法
Sep 06 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
浅谈node的事件机制
Oct 09 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
微信小程序实现多图上传
Jun 19 Javascript
ES6 十大特性简介
Dec 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备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python入门之modf()方法的使用
2015/05/15 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python模块之re正则表达式详解
2017/02/03 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python实现剪切功能
2019/01/23 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python版百度语音识别功能
2019/07/09 Python
python读写文件write和flush的实现方式
2020/02/21 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
应用服务器有那些
2012/01/19 面试题
自荐信结尾
2013/10/27 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
努力学习演讲稿
2014/05/10 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
党员三严三实心得体会
2014/10/13 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书