这两天开发微信小程序,在设置背景图片时,发现在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;
}

  显示结果:

,别骂我,我是德棍!

微信小程序开发--背景图显示的更多相关文章

  1. 微信小程序开发demo-地图定位

    要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到”当前位置经纬度“ getLocation: function ( ...

  2. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  3. 解决Mac版微信小程序开发工具打开后无法显示二维码

    问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...

  4. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  5. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  6. 艾妮记账本微信小程序开发(失败版)

    这是一个寒假假期作业,要求是用web开发或者微信小程序或者手机app开发的,我本来是打算用微信小程序开发的,但由于这个后台数据库连接需要通过https认证后的浏览器再访问MySQL.所以做到后台数据库 ...

  7. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  8. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  9. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

随机推荐

  1. Kotlin 语言作为Android新的官方语言

    苹果用 swift 作为官方语言替代 object-c  ; 谷歌 刚开完io大会 也宣布 用  kotlin 作为官方语言 替代java.工具还是xcode ,android studio. 来自于 ...

  2. Django Admin实现三级联动(省市区)

    通过自定义Admin的模板文件实现省市区的三级联动.要求创建记录时,根据省>市>区的顺序选择依次显示对应数据. 修改记录时默认显示已存在的数据. Model class Member(mo ...

  3. Error:fatal: Not a git repository (or any of the parent directories): .git

    在项目目录下执行git init命令. 大功告成.

  4. Visual Studio最好用的快捷键(你最喜欢哪个)

    每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分,借 ...

  5. 「每日一码」(精品代码,质量保证)empty和undefined

    将每天看到的优秀的代码或者特别的实现,记录下来 2019-2-26 empty和undefined 数组的filter,以下输出结果是什么 var arr = [1,2,3]; arr[10] = 9 ...

  6. 常用的oh-my-zsh插件

    每次换电脑,需要重新配置开发环境是件很麻烦的事情,作为一个有洁癖的人又不想用Time Machine.记忆力大不如以前,很多插件又忘了装.正好下个月又需要给团队小伙伴讲讲提升效率这件事要讲到oh-my ...

  7. 软件架构设计学习总结(15):远程通信(RPC,Webservice,RMI,JMS、EJB、JNDI的区别)对比

    总结这些概念都是易混淆,最基本概念定义复习和深入理解,同时也是架构师必备课程   RPC(Remote Procedure Call Protocol) RPC使用C/S方式,采用http协议,发送请 ...

  8. postgreSql 常用查询总结

    1. 日期格式转化(参考) select beg_time, end_time, extract(epoch from to_timestamp(end_time,'yyyy-mm-dd-HH24-M ...

  9. UVA 11582 Colossal Fibonacci Numbers!(循环节打表+幂取模)

    题目链接:https://cn.vjudge.net/problem/UVA-11582 /* 问题 输入a,b,n(0<a,b<2^64(a and bwill not both be ...

  10. UIKit 框架之WebView

    // // ViewController.m // UIWebView // // Created by City--Online on 15/5/18. // Copyright (c) 2015年 ...