微信小程序开发--背景图显示
这两天开发微信小程序,在设置背景图片时,发现在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也要非常熟悉 我将该 ...
随机推荐
- typedef在C和C++的区别?
一.struct定义结构体1.先声明结构体类型再定义变量名struct name{ member ..};name A;... 如:struct student{ int a;};student st ...
- Hadoop不适合处理实时数据的原因剖析
1.概述 Hadoop已被公认为大数据分析领域无可争辩的王者,它专注与批处理.这种模型对许多情形(比如:为网页建立索引)已经足够,但还存在其他一些使用模型,它们需要来自高度动态的来源的实时信息.为了解 ...
- Java你不知道的那些事儿—Java隐藏特性(上)
每种语言都很强大,不管你是像我一样的初学者还是有过N年项目经验的大神,总会有你不知道的东西.就其语言本身而言,比如Java,也许你用Java开发了好几年,对其可以说是烂熟于心,但你能保证Java所有的 ...
- map集合的见解、排序
map是键值对的集合接口,它的实现类主要包括:HashMap,TreeMap,Hashtable以及LinkedHashMap等 HashMap:我们最常用的Map,它根据key的HashCode 值 ...
- markdown简单入门
1.斜体和加粗: 使用下划线"_"或"*"括起来 _内容_ or *内容* 1个_ 或 * 都是斜体,2个则是加粗: 3个既斜体 又加粗,4个以上则没什么变化 ...
- ptmalloc总结
内存管理的一般方法 C 风格的内存管理程序主要实现 malloc()和 free()函数. 内存池是一种半内存管理方法.Apache 使用了池式内存(pooled memory),将其连接拆分为各个阶 ...
- 对CAP原理的理解
对CAP原理的理解 CAP原理按照定义,指的是C(Consistency)一致性,A(Availability)可用性,P(Partition tolerance)分区容错性在一个完整的计算机系统中三 ...
- git 分支 branch 操作
创建分支 git branch test: 基于当前commit创建test分支..git/HEAD 文件中记录了当前分支名字. 删除分支 git branch -d test:删除本地test分支 ...
- vue路由管理-保留滚动位置功能、按需加载模块名自定义
路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态 ...
- Log4j的邮件发送类SMTPAppender改造
在开发过程中,我们有时需要将重要的错误日志通过邮件发送给相关的责任人,这样能即时发现错误,即时解决.如使用Log4J,一般会做如下配置: log4j.rootLogger = debug,mail # ...