本文链接:https://blog.csdn.net/michael_f2008/article/details/86543134
开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错:“本地资源图片无法通过WXSS获取,可以使用网络图片,或者 base64,或者使用<image/>标签。”

这里主要介绍使用<image/>标签的方法
网上有很多方法,笔者也尝试了不少,期间也遇到一些问题。最后总结一下,只需2步:

1、在wxml文件中添加一个<image/>标签:

<!--页面根标签-->
<view class="content">
<!--pics文件夹下的background.jpg文件-->
<image class='background' src="../../pics/background.jpg" mode="aspectFill"></image>
<!--页面其它部分-->
</view>

2、在wxss文件中添加:

page{
height:100%;
}
.background {
width: 100%;
height: 100%;
position:fixed;
background-size:100% 100%;
z-index: -1;
}

要说明的是z-index: -1,可以让图片置于最底层,不会影响其它部分。

微信小程序开发:背景图片设置的更多相关文章

  1. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

  2. 微信小程序开发及相关设置小结

    今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看 ...

  3. 微信小程序开发--背景图显示

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image ...

  4. 微信小程序——引入背景图片【六】

    前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信 ...

  5. 微信小程序添加背景图片的坑

    给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客  https://blog.csdn.net/y ...

  6. 微信小程序开发中怎么设置转发(分享)的信息

    如果什么都不设置,转发时默认名称是小程序的名称,转发的图片显示的是当前页面的截图,如图一 如何在自定义转发信息呢? 在进行转发的页面中: Page({ onShareAppMessage: funct ...

  7. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  8. 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{i ...

  9. 微信小程序 - 动态背景图片实现

    很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)

  10. 微信小程序开发教程目录

    本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 ...

随机推荐

  1. php在虚拟机和windows上的应用

    学习目标:linux+apache+php合在一起的应用                在windows中三者的的关联及应用 php是apache的一个外挂程序,必须依靠web服务器才可以运行.当客户 ...

  2. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  3. MySQL MHA--故障切换模式(GTID模式和非GTID模式)

    GTID和非GTID故障切换模式选择 MySQL 5.6版本引入GTID来解决主从切换时BINLOG位置点难定位的问题,MHA从0.56版本开始支持基于GTID的复制,在切换时可以采用GTID模式和非 ...

  4. 常用的PHP字符串操作函数

    1.strlen 但是要注意!如果字符串中是汉字等其他字符时候呢? $str = "我"; echo strlen($str); //一个汉字,在UTF8格式下,显示3, ANSI ...

  5. oracle执行计划(二)----如何查看执行计划

    目录: (一)六种执行计划  (1)explain plan for  (2)set autotrace on  (3)statistics_level=all  (4)dbms_xplan.disp ...

  6. php数字字母字符串比较

    <?php$a="12a";if($a==12){echo "good";}?>这种情况能输出good,字母在后时只比较前两位,认为是相等:字母在前 ...

  7. P3375 模板 KMP字符串匹配

    P3375 [模板]KMP字符串匹配 来一道模板题,直接上代码. #include <bits/stdc++.h> using namespace std; typedef long lo ...

  8. 关于srping的AOP事务管理问题,自定义切面是否导致事务控制失效

    applicationContext.xml: <!-- 方法调用时间记录 --> <bean id="methodExecuteTime" class=&quo ...

  9. mysql优化过程中遇见的坑(mysql优化问题特别注意)

    不要听信你看到的关于优化的“绝对真理”,包括本文所讨论的内容,而应该是在实际的业务场景下通过测试来验证你关于执行计划以及响应时间的假设. 单条查询最后添加 LIMIT 1,停止全表扫描. 对于char ...

  10. mysql 查询今天,昨天,上个月sql语句

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天Select * FROM 表名 Where TO_DAYS( NOW( ) ...