微信小程序 - 设置背景图

本来就是简简单单设置一个背景图，非常简单的功能，也就一行代码的事儿，但是没想到竟然另有蹊跷，故此记录一波 ~

正常设置：给整个页面设置背景图片

background-image: url ('本地图片地址')

当我们设置完毕之后，你会发现根本 展示不出来~

主要因为微信小程序通过background-image设置背景是有限制的，目前只支持以下俩种类型

base64图片（图片转化之后会字符串非常长）
网络图片 (图片地址必须是https协议头)

Base64设置方式

实现步骤

找到对应的背景图，通过base64转换成新的图片地址
基于不是新手的原因，我们把base64的字符串放在.wxss文件下（莫写行内，因为这个串太长，影响自己心情）

.wxss ( 吐槽：这个字符串超出想象的长 )

注意：为了是背景图片自适应宽高，可以做如下设置

配置版

  background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;

完整版

.parent-bg {background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;background-image: url(转换后的base64图片字符串)}

最后在 .wxml内引用我们上面写好的class 属性（大功告成 ~)

<view class='parent-bg'> </view>

网络图片 - 设置方式

实现代码

.wxss

.bg {margin: 0;padding: 0;position: relative;width: 100%;
}

.wxml

  <image class='bg' src='../../images/home/bg.png' style='height:{{screenH}}px'></image>

app.js

  globalData: {screenHeight: 0,}

var h = getApp().globalData.screenHeight;Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {that.setData({screenH: h})},
})

微信小程序 - 设置背景图相关推荐

微信小程序设置背景图的几种方式
微信小程序设置背景图的几种方式原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...
微信小程序设置背景图铺满顶部
由于微信小程序自带顶部导航栏,导致我们设置背景图时总是无法铺满顶部,其实想要铺满顶部只需要改变一个属性即可.将navigationStyle的默认属性修改为custom 在微信小程序需要设置背景图的文 ...
微信小程序设置背景图
在网上查了下面的方法 ,然而并不能行.... 经测试使用绝对定位是可以完成的 .wxml .wxss 这样就可以做到平铺填充整个view,做到背景图的效果! 转载于:https://juejin.im ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
微信小程序——设置背景图片
项目希望实现如上效果, 使用vant的picker组件而源码是这样的: <viewclass="van-picker__cancel"hover-class="v ...
微信小程序设置背景图片
经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法: css中通过url获取网络图片微信小程序中不能使用本地图片 background-image:url ...
微信小程序设置背景占满整个页面
微信小程序,默认的根节点是<page></page>,所有内容都包裹在这个标签里,如何让页面的背景占满整个屏幕?? <page><view class=&qu ...
微信小程序设置背景图片不显示问题解决方法
最近开发小程序的过程中遇到了这样一个小问题,在wxss文件中通过background设置背景图片,要实现背景图片上显示文字的效果,发现背景图片不显示,设置背景图片的代码如下: .test {width ...
【实战】前端必会 —— 微信小程序引入背景图
文章目录一.图片引用二.样式处理一.图片引用 wxss中直接引用本地图片会报错: url(../../images/login/bg.png-do-not-use-local-path-./pa ...

微信小程序 - 设置背景图

微信小程序 - 设置背景图相关推荐

最新文章

热门文章