这两天开发微信小程序,在设置背景图片时,发现在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. copy代码的时候,如何去掉代码前边的编号

    从网页上拷贝下来的代码前面总有编号,如何去掉! 1.使用正则表达式:在editorplus(notepad++)里按ctrl+h,弹出框里勾选上“正则表达式(regular expression)”, ...

  2. 课程一(Neural Networks and Deep Learning),第二周(Basics of Neural Network programming)—— 0、学习目标

    1. Build a logistic regression model, structured as a shallow neural network2. Implement the main st ...

  3. ActiveMq使用笔记

    java JMS技术 .1.   什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用 ...

  4. Bash数组

    1. 数组申明 declare -a array 2. 数组赋值 #法1 array=(var1 var2 var3 ... varN) #法2 array=([]=var1 []=var2 []=v ...

  5. 杂谈:Windows操作系统的介绍与对Win8操作系统市场反响冷淡原因的分析

    Windows操作系统,毫无疑问是操作系统市场上的霸主,也正因为Windows操作系统的诞生让电脑的操作性能变得更加平民化,深的用户的喜爱.至今身边的人也是选择windows操作系统的居多,这篇文章也 ...

  6. Jenkins持久化集成使用

    1.概述 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 持续的软件版本发布/测试项目 监控外部调用执行的工作 2.搭建 2.1环境准备 首先我们要准备搭建的环 ...

  7. 第三方登录:新浪微博登录(OAuth2.0)

    在<Github第三方登录--通用化的第三方登陆实现>中我们实现了一个通用化的第三方登录框架,其中包括OAUth的基本流程以及最简单的用户注册.但是不同的第三方登录因为其细节不同还是有很多 ...

  8. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...

  9. hibernate 验证异常 javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint

    使用hibernate validator出现上面的错误, 需要 注意 @NotNull 和 @NotEmpty  和@NotBlank 区别 @NotEmpty 用在集合类上面@NotBlank 用 ...

  10. ansible 角色登陆

    用ansible 来管理远程的主机,最大的好处是方便,ansible不用在远程的主机上安装ansible的客户端,ansible只要能通过ssh连接上远程主机就 能对它进行管理.也就是说ansible ...