小程序开发之背景图片的设置

最新推荐文章于 2024-04-01 17:24:48 发布

夕若没落丶然寒曲兮

最新推荐文章于 2024-04-01 17:24:48 发布

阅读量682

点赞数

本文链接：https://blog.csdn.net/qq_41662119/article/details/84968354

版权

小程序开发时，背景图片的设置不再像h5开发那么任性，必须遵守小程序开发api来完成。

两种方式

设置远程服务器上的图片，可以无任何问题加载成背景图片
- 缺点需要把图片放置到服务器
将需要设置的背景图片转化为base64，然后将转换后的编码设置为背景图片
- 缺点：转换后的base64，会很大，很乱。占据一定空间，造成代码累赘

转化base64工具地址： https://tool.lu/base64image/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夕若没落丶然寒曲兮

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

小程序设置背景图片 (方法全)

fortune丶的blog

04-01

5万+

小程序背景图设置在wxss文件中，使用background-image: url();设置背景图，报错，提示pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签小程序中设置区域背景图，对于在wxss文件中，存在本地资源无法获取的问题。解决方案在错误提示中也给出来了 1、使用网络图片我们...

科技类程序背景图片

11-23

科技类程序背景图片 程序开发必备素材呵呵大家赶紧下载！

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

微信小程序使用背景图片

热门推荐

Cloud_Lion的博客

06-04

5万+

微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片；base64图片设置步骤如下： 1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本：background-image: url("data:image/png;base64,iVBORw0KGgo=.....

微信小程序中，图片的位置设置

qq_53295063的博客

11-13

1万+

在编写小程序的时候，难免会涉及到图片的位置放置。以及具体的wxss格式的设置，在这里想进行一个具体格式的讲解。

小程序开发填坑《四》view标签设置背景图片手机无法预览

03-29

1、将本地图片链接改为网络图片链接，如下图 (此图片来源于网络，如有侵权，请联系删除! ) 2、微信开发者工具显示效果 (此图片来源于网络，如有侵权，请联系删除! ) 3、手机预览显示效果 (此图片来源于网络，...

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

10-16

在微信小程序开发中，有时我们需要对默认的头部导航栏进行自定义，以满足特定的设计需求。本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 ...

微信小程序开发背景图显示功能

10-18

在微信小程序开发中，设置背景图是一个常见的需求。然而，开发者可能会遇到背景图无法正常显示的问题，这主要是由于微信小程序对图片引用方式的限制。本文将详细解释如何正确地在微信小程序中设置背景图片。首先，...

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

05-31

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

小程序 背景图 repeat_最美星空背景图，没有美不美，只有你想不想要！

weixin_39683163的博客

10-26

879

阅读本文前，请您先点击上面的蓝色字体，再点击“关注”，这样您就可以免费收到最新内容了。每天都有分享，完全是免费订阅，请放心关注！ ( 图文来源于网络，侵权联系删除谢谢！)最美星空背景图，没有美不美，只有你想不想要！今天小...

微信小程序如何设置背景图片

qq_44654974的博客

04-01

4447

今天第一次来尝试微信小程序，可在了解完基本常识之后。设置背景图片就难到我了。 CSDN上面找了一些办法，大致有以下几种： 1.转换为base64格式或者使用网上图片 background-image:url("../") 2.使用本地图片（笨方法）（1）将图片上传本地项目文件（2）在wxml使用 (3) 设置图片大小，位置 <image src="../image/职场加班闪屏引导页...

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

qingyangcc123的博客

11-27

9576

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

小程序多张启动页面的设置

缓月

04-12

1283

像很多APP，下载完毕开始使用的时候都会有一个至少三个页面启动页面，我就想小程序是不是也可以实现这种效果，但是通过搜索我好像并没有找到类似的解决办法。我后来看到轮播图，突发灵感想到一个办法：利用swiper组件做成三个全屏页面轮播，最后一个页面设置一个“点击进入”的button进行小程序授权登录。这样既解决了启动页面要求只出现一次的问题，还不用再另外设置授权登录。粘贴代码如下 ...

如何给小程序页面加载一张背景图片

祈澈菇凉

05-23

2520

我们知道，在PC端，想在一个页面插入一张背景图，只需要如下属性即可。 background-image: url("../images/photo.png"); 在小程序里面，如此做法就行不通了，图片不但不会显示而且还会报错了 pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64...

微信小程序背景图片设置问题

如梦如幻的博客

02-04

3万+

我们都知道，用css给网页设置背景图片，可以导入网络图片和本地图片。 1. 网络图片：元素定位{ background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517753496248&di=c464b97f6d0b3937307066e...

web前端入门到实战：背景颜色、背景图片、背景填充

软件开发-前端开发-IT

10-06

1万+

一、背景 1.如何设置标签的背景颜色（1）在CSS中有一个background-color：属性值；，就是专门用来设置标签的背景颜色。（2）取值：具体单词、RGB、RGBA、十六进制例子： <style> .p1{ background-color: red; } .p2{ ...

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

蓝冷然的博客

01-11

2万+

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

微信小程序给input标签添加背景图，出现两个图片

Nina_xy123的博客

08-07

6147

微信小程序给input标签添加背景图，出现两个图片微信小程序给input标签添加背景图，给了no-repeat，会出现两个背景图原因：是input样式中的 padding-left 引起的解决方法：把背景图放在input标签的外层 <view style='background:url(/images/GL_icon_37.png) #d7d7d...

小程序云开发页面设置背景图片

05-11

要在小程序云开发页面设置背景图片，可以按照以下步骤进行操作： 1. 在小程序云开发控制台中，找到要设置背景图片的页面所对应的云函数。 2. 在该云函数的代码中，找到页面渲染函数（一般为 `onLoad` 或 `onReady`），然后将以下代码添加到函数中： ``` wx.cloud.getTempFileURL({ fileList: ['cloud://你的云环境ID/你的图片文件路径'], success: res => { this.setData({ backgroundUrl: res.fileList[0].tempFileURL }) }, fail: console.error }) ``` 其中，`你的云环境ID` 是你的小程序云开发环境ID，`你的图片文件路径` 是你要设置为背景图片的图片文件在云存储中的路径。 3. 在页面的 WXML 文件中，添加以下代码： ``` <view class="background" style="background-image: url({{backgroundUrl}})"></view> ``` 其中，`.background` 是你要设置为背景图片的视图的类名，`backgroundUrl` 是在第二步中设置的背景图片的临时文件URL。 4. 在页面的 WXSS 文件中，添加以下代码： ``` .background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-size: cover; } ``` 其中，`background-size` 可以根据你的需求进行调整。完成以上步骤后，保存代码并预览页面，即可看到设置的背景图片。