微信小程序—背景图片

最新推荐文章于 2023-02-28 16:24:20 发布

原创最新推荐文章于 2023-02-28 16:24:20 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#背景图片 #js #微信小程序

微信小程序专栏收录该内容

1 篇文章

订阅专栏

在微信小程序开发中，使用本地图片作为背景无法显示，改用网络图片可显示但非全屏，需让page占全屏来实现背景图片全屏显示，开发过程涉及js相关操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一开始我想用本地图片可是发现他不让用。。。

但是他可以用网络图片(●'◡'●)，所以我就改用网络图片，这样背景图片就显示出来了，不过他并不是全屏的

这里要让page占全屏

page{

height: 100%;

width: 100%;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_42621132

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序背景图片设置和图片自适应宽高

kerryqpw的博客

07-14

3万+

微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片。网络图片：.ServiceCenter{ width: 100vw;height: 40vw;margin-top:0.5vw ;background: url('http://www.hirelaxpalace.com/ddpk/image/ddpkxiaochengxuimg/ser...

微信小程序之设置背景图片

weixin_50874065的博客

07-01

1万+

最近在做微信小程序，我想把一个图片当做背景并实现毛玻璃效果（如图1所示）来使小程序页面好看。写此博客记录一下

参与评论您还未登录，请先登录后发表或查看评论

四种方法解决微信小程序设置背景图片，哪种最好？

qingyangcc123的博客

11-27

1万+

做了许久的小程序，现在选择用博客记录我遇到的问题以及问题的解决办法，也分享给大家一些自己的心得，记录如下：问题描述在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题。代码： .bg{ width: 750rpx; height: 540rpx; background-image: url(../../images/head_bg.png); } 在页面使用这个样式的时候小程序会报错。解决方案 小程序背景图片无法直接使用本地图片。有4种解决方案：使用

微信小程序显示背景图片

hansiqi0817的博客

09-10

2787

我们可能总遇到这种情况，当我们引入本地的图片作为背景图片时（background-image）图片并未显示，引入的相对路径都是对的，导致这个现象的原因就是小程序的wxss中使用background-image时不支持显示本地图片，只支持显示线上图片和base64格式的图片，我们要转化为base64也是非常简单的：首先打开https://www.base64-image.de/网址引入要转化的图...

微信小程序设置背景图片

热门推荐

Beyond the Horizon

04-22

4万+

经常为微信小程序设置颜色背景，突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法： css中通过url获取网络图片 微信小程序中不能使用本地图片 background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx) Base64编码格式 background-image:url(转换之后的base64字符串) 利用流布局，设置z-i...

微信小程序图片使用示例

祈澈菇凉

05-24

3438

小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 1：加载本地文件夹图片 <image src="/image/pig.jpg" mode="aspectFill"> </image> ...

微信小程序 图片绝对定位(背景图片)

08-30

在微信小程序开发中，图像的定位是创建美观且功能丰富的用户界面的关键部分。本篇文章将深入探讨如何实现图片的绝对定位，特别是作为背景图片的使用。在小程序中，图片的布局和定位往往受到CSS或wxss（微信小程序...

云开发版粉色ui微信小程序源码/背景图/头像/壁纸/小程序源码带流量主

05-31

【已测】云开发版粉色ui微信小程序源码/背景图/头像/壁纸/小程序源码带流量主云开发小程序源码无需服务器和域名即可搭建小程序另外还带有流量主功能噢！微信平台注册小程序就可以了这套粉色UI非常的好看，里面...

微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题

10-16

本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。首先，微信小程序提供了`navigationStyle`属性，允许开发者禁用默认的导航栏并自定义样式。...

微信小程序图片识别AR叠加模型动作的源码工程

08-23

本工程是开发的微信小程序的图片识别并叠加模型动作的功能，具体使用的是2D Marker识别模式，会将传入的 src (图片的网络/本地地址) 或是 image（image类型资源id，优先使用）作为特征，去识别出三维空间一个平面上...

微信小程序图片素材 微信小程序图片素材

10-26

微信小程序图片素材，

小程序 设置背景图片

Young_Gao的博客

01-20

1721

使用 /static/img/aaa.png 这种路径是不行的，上述你在编译器里能看到，但是到了手机里就看不到了建议使用 url 或者 base64 转码这里是图片转码传送门 http://imgbase64.duoshitong.com/...

微信小程序把玩（三十二）Image API

FUCK

09-27

1万+

选择图片时可设置图片是否是原图，图片来源。这用的也挺常见的，比如个人中心中设置头像，可以与wx.upLoadFile()API使用主要方法：wx.chooseImage(object)wxml <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button> <!--通过数据绑定的方式动态获取

小程序背景图片问题

spfLinux的博客

01-29

918

今天在小程序中设置了背景图片，发现不好使。不管是设置内联样式还是放在外部样式表，甚至加上!important都不好使，怎么办？后来查了下，发现可以通过标签设置一张图片做为背景图片，并把这张图片上的内容，例如text等标签放到之间，并且可以设置z-index突出层级关系。就ok了。

设置小程序某一板块背景图片

暗透了更能看到星光

08-24

538

设置小程序某一板块背景图片 height: 228rpx; width: 692rpx; background-size:contain;

微信小程序开发：设定背景图片

weixin_52312427的博客

02-28

8554

今天在开发小程序的时候用到背景图片设定功能，但请求本地资源的图片时却提示错误，无法加载本地资源。那它的原因是什么呢？又有什么其他设置的方式？作者今天来给你解答。

【微信小程序】background-image设置背景图片

豆。的博客

09-12

6846

微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片； base64图片设置步骤如下：1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 //括号中填入转换出来的bese64格式的文本 background-image: url("data:image/png;base64,iVBORw0...

微信小程序，使用本地图片作为背景

蓝冷然的博客

01-11

2万+

微信小程序中由于限制原因，不能直接给view设置本地的图片。所以有以下几种解决方法 1.使用网络图片 2.使用base64格式 3.使用image来装载本地的图片，然后作为界面背景前面两种都很简单，下面我们重点来讲讲第三种。一般大家的苦恼都是这么把imageview放到界面的最下面。那么下面直接上代码。 wxml <view class="root"> <image cl...

微信小程序------背景图片处理

weixin_42269052的博客

04-24

494

背景图片设置首先要把你要设置的背景图片放到你的服务器中，这个服务器要能外网访问，也就是说，可以在浏览中访问。然后在代码样式wxss中写入 background-image: url('http://BackgroundPic.png');// 背景图片 background-size: 100% 500rpx;//背景图片设置宽度与高度前台wxml class=’'引用就可以了 ...

微信小程序背景图片全屏

最新发布

02-09

### 实现微信小程序背景图片全屏显示为了使微信小程序中的背景图片能够完全覆盖整个屏幕，可以采用多种方式来配置样式。以下是几种常见且有效的方法。 #### 方法一：通过 WXSS 设置背景图片属性在页面对应的 `.wxss` 文件中定义全局 `page` 或者特定容器的选择器，并应用如下 CSS 属性： ```css /* 定义背景图像 */ page { background-image: url('/path/to/image'); /* 替换为实际图片路径 */ } /* 确保背景图填充整个视口 */ .bg-fullscreen { width: 100vw; height: 100vh; background-size: cover; /* 让背景图按比例缩放并填满整个区域 */ background-position: center; /* 将背景居中放置 */ background-repeat: no-repeat;/* 防止重复平铺 */ } ``` 此方法适用于希望让单张大尺寸高质量的背景图适配不同分辨率设备的情况[^3]。 #### 方法二：利用 JSON 页面配置文件调整布局参数对于某些特殊场景下的需求，比如启动页或者其他独立功能模块，可以在对应页面级别的 `.json` 文件里指定一些额外的视觉效果选项： ```json { "usingComponents": {}, "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "", "enablePullDownRefresh": false, "onReachBottomDistance": 50 }, "style": "v2", // 使用新版基础库支持更多特性 "backgroundColorTop": "#ffffff", // 上方导航栏颜色 "backgroundColorBottom": "#ffffff"// 下方TabBar颜色 } ``` 需要注意的是，在这里并不能直接设置完整的背景图片，而是主要用于控制界面色调和其他交互行为[^4]。 #### 方法三：动态计算窗口大小并通过 JavaScript 控制 DOM 结构如果想要更加灵活地处理各种情况，则可以通过编写简单的脚本逻辑获取当前可视区的高度宽度信息，再据此修改 HTML 元素的相关样式属性值。这通常涉及到 WXML 和 JS 的配合工作： WXML部分： ```html <view class="container"> </view> ``` JS部分： ```javascript Page({ onLoad() { const query = wx.createSelectorQuery(); query.select('.container').boundingClientRect((rect) => { this.setData({ containerHeight: rect.height }); }).exec(); // 获取系统信息以确定屏幕尺寸 wx.getSystemInfo({ success(res){ console.log('Window Height:', res.windowHeight); console.log('Window Width:', res.windowWidth); that.setData({ windowHeight: res.windowHeight, windowWidth : res.windowWidth }) } }); }, data:{ containerHeight:'' } }) ``` WXSS部分： ```css .container { position: relative; overflow: hidden; &::before { content:""; display:block; padding-top: calc(var(--height, 100%) / var(--width, 100%) * 100%); } img { position:absolute; top:0;left:0; width:100%; height:auto; object-fit:cover; } } ``` 这种方式允许开发者基于运行时环境的变化做出响应式的调整，从而更好地满足复杂应用场景的需求[^2]。