微信小程序开发--背景图显示
这两天开发微信小程序,在设置背景图片时,发现在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:;
}
.background-image {
width: 225px;
height: 150px;
opacity: 0.8;
}
.post-specific-image {
width: 215px;
height: 150px;
vertical-align: middle;
}
显示结果:
,别骂我,我是德棍!
微信小程序开发--背景图显示的更多相关文章
- 微信小程序开发demo-地图定位
要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到”当前位置经纬度“ getLocation: function ( ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 解决Mac版微信小程序开发工具打开后无法显示二维码
问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- 艾妮记账本微信小程序开发(失败版)
这是一个寒假假期作业,要求是用web开发或者微信小程序或者手机app开发的,我本来是打算用微信小程序开发的,但由于这个后台数据库连接需要通过https认证后的浏览器再访问MySQL.所以做到后台数据库 ...
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
随机推荐
- 13、最新安卓Xamarin绑定相关填坑之旅
今天群里面有兄弟伙说第三方库用不起.说实话在我觉得第三方库能成功的几率大于90% 除了极少数恶心的库以外. 绝大部分第三方库都还是可以绑定好的 https://github.com/youzan/Yo ...
- Java语言基础(方法与数组)_DAY05
1:函数(掌握) (1)定义在类中,有特定功能的一段小程序,可以独立运行. (2)函数的格式: 修饰符 返回值类型 函数名(形参类型 形式参数1,形参类型 形式参数2...) ...
- Linux驱动:I2C驱动编写要点
继续上一篇博文没讲完的内容“针对 RepStart 型i2c设备的驱动模型”,其中涉及的内容有:i2c_client 的注册.i2c_driver 的注册.驱动程序的编写. 一.i2c 设备的注册分析 ...
- hibernate对连接池的支持和HQL查询
hibernate对连接池的支持 连接池, 作用: 管理连接:提升连接的利用效率! 常用的连接池: C3P0连接池 Hibernate 自带的也有一个连接池,且对C3P0连接池也有支持! 只维护一个连 ...
- Makefile中.PHONY的作用
单词phony (即phoney)的意思是:伪造的,假的.来自collins的解释是: If you describe something as phoney, you disapprove of i ...
- Log4j和Log4j2的区别
Log4j是Apache的一个开源项目,我们不去考究它的起源时间,但是据我了解,log4j 1已经不再更新了. 下面我就以列举的方式来浅谈log4j和log4j 2的不同之处. 一.配置文件类型 lo ...
- OpenSSL修复加密漏洞、加强Logjam防御
来源:TechTarget中国作者:Michael Heller翻译:张程程 OpenSSL项目团队为其密码库发布补丁以修复一个严重的漏洞(该漏洞可能允许攻击者解密HTTPS通信),同时强化对Logj ...
- 【LeetCode题解】24_两两交换链表中的节点(Swap-Nodes-in-Pairs)
目录 描述 解法一:迭代 思路 Java 实现 Python 实现 复杂度分析 解法二:递归(不满足空间复杂度要求) 思路 Java 实现 Python 实现 复杂度分析 更多 LeetCode 题解 ...
- 浅谈移动应用的跨平台开发工具(Xamarin和React Native)
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...
- 第2章:MapReduce
MapReduce是一个数据处理的编程模型.这个模型很简单,但也不是简单到不能够支持一些有用的语言.Hadoop能够运行以多种语言写成的MapReduce程序.在这一章中,我们将看看怎样用Java,R ...