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

最新推荐文章于 2024-05-07 14:49:50 发布
最新推荐文章于 2024-05-07 14:49:50 发布
阅读量1w 收藏 27
点赞数 5
分类专栏： 微信小程序 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yua_H/article/details/115438623
版权

设置背景图片的几种方式

1、在view中加入image标签，image标签中加入本地图片地址
2、view中使用网络图片地址
3、view中使用base64格式
注：微信小程序不允许在view中添加本地图片作为背景图片

1、image添加本地图片作为背景的三层结构

在这里插入图片描述

  • 最外层：title层，这一层用于存储背景图片和内容

wcss：
在这里插入图片描述

  • 图片层：title_image层，用于放置背景图片
    wcss:
    在这里插入图片描述
  • 内容层：user-info类，用于填写具体内容

wcss:
在这里插入图片描述
利用本地图片设置背景的关键在于图片位置的放置，最外层使用相对布局，里面的控件使用绝对布局

2、view中加入网络图片地址

wcss:
在这里插入图片描述

Yua_H
关注
  • 5
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
08-28
主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下
四种方法解决微信小程序设置背景图片，哪种最好？
qingyangcc123的博客
11-27 9360
做了许久的小程序，现在选择用博客记录我遇到的问题以及问题的解决办法，也分享给大家一些自己的心得，记录如下： 问题描述 在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题。 代码： .bg{ width: 750rpx; height: 540rpx; background-image: url(../../images/head_bg.png); } 在页面使用这个样式的时候小程序会报错。 解决方案 小程序背景图片无法直接使用本地图片。有4种解决方案： 使用
5.7 微信小程序view设置背景图片background-image无效
最新发布
weixin_45785694的博客
05-07 293
微信小程序背景图不能用本地图片，改成。<image/>组件。
微信小程序之设置背景图片
weixin_50874065的博客
07-01 1万+
最近在做微信小程序，我想把一个图片当做背景并实现毛玻璃效果（如图1所示）来使小程序页面好看。写此博客记录一下
微信小程序 背景图片设置
热门推荐
weixin_43736639的博客
03-22 3万+
微信小程序设置背景图片时，有两种方法： 第一：直接在.wxss中中使用 “background-image:url()” 设置背景图片，但是这种加载背景图片的方法存在一个问题，就是所加载的图片只能是网络图片或base64图片，是不可以加载本地图片的。 但是使用base64图片也存在弊端，（1） base64 编码后比原图要大；（2）如果把大图片编码到 html / css 中，会造成后者体积明显增加，明显影响网页的打开速度。 本地图片转换成base64图片...
微信小程序设置背景图的几种方式
血色天空的专栏
03-15 1万+
在开发工具上显示ok，结果拿着手机预览，图片显示不出来，看来这种也不行，哎只能乖乖的按那三种提示进行设置背景图片啦。中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。2.base64格式的图片,访问。3.使用标签。上传图片生成base64。
微信小程序中，将一张图设置成背景图的几种方式
互关互粉，相互学习。
03-22 6863
注意有小朋友可能要用html那一套，使用background-image不适用于微信小程序。将背景图片使用编码base64进行转换，中的本地资源图片无法通过 WXSS 获取。
微信小程序——模拟时钟.rar
09-30
在本例中，我们关注的是一个特定的小程序——模拟时钟。 模拟时钟是时间显示的一种方式，它通过指针旋转来表示小时、分钟和秒。在电子设备上，模拟时钟通常会以数字形式呈现，但依然保留了传统机械时钟的外观和感觉...
详解微信小程序——自定义圆形进度条
01-03
微信小程序 自定义圆形进度条，具体如下： 无图无真相，先上图： 实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。 代码实现： JS代码： Page({ data: {}, onLoad: function (options) { // ...
微信小程序——顶部分页导航栏
12-29
2. **自定义样式**：微信小程序支持自定义导航栏的样式，开发者可以通过CSS样式来调整导航栏的高度、背景色、文字颜色等属性，以满足个性化的需求。使用`wx.setNavigationBarStyle` API可以动态改变导航栏的样式。 ...
微信小程序tabbar图标素材
04-18
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，旨在让开发者能够快速构建在微信内运行的应用。在微信小程序中，TabBar 是一个至关重要的组件，它位于小程序页面底部，通常包含固定的一组功能入口，如首页...
给view添加背景图
MR_worf的博客
05-18 1956
在实际开发中需要给View 添加一个背景图 常见的方法有:1.通过UIImageView创建一个 UIImageView 让后在View上添加 这个视图(不推荐) 缺点.图片有时候会被拉伸,失真2.通过view的colorself.view.backgroundColor =[UIColor colorWithPatternImage:[UIImage imageNamed:@"我是背景"]];
微信小程序开发：设定背景图片
weixin_52312427的博客
02-28 6347
今天在开发小程序的时候用到背景图片设定功能，但请求本地资源的图片时却提示错误，无法加载本地资源。那它的原因是什么呢？又有什么其他设置的方式？作者今天来给你解答。
微信小程序中（设置成背景图的几种方式）
我们好像在哪见过
03-22 1759
​ 使用base64格式图片，访问图片base64编码 将背景图片使用编码base64进行转换， 网址如下： base64图片在线转换工具 - 站长工具 ​
小程序view的背景图片
wsxDream的博客
11-30 2173
小程序的背景图片通过给view添加class，运用backgroundimage:url(‘图片转化base64的代码’)， 将图片转化为base64可以去站长工具,如果大小不合适，可以通过 background-repeat:no-repeat; /** 不重复*/ background-size:contain; /**等比例缩放*/ 来自适应。 ...
正确设定背景图片 ios
Yolanda的专栏
05-21 667
在View里放背景图片就像很多其它iOS编程一样有很多方法: 使用UIColor的 colorWithPatternImage来设置背景色； 在view中添加一个UIImageView作为一个子View。 如果你使用全画幅的背景图，你就必须使用UIImageView因为UIColor的colorWithPatternImage是用来创建小的重复的图片作为背景的。这种情形下使用UI
微信小程序——自定义底部tabBar
01-03
微信小程序可以通过自定义底部tabBar来实现更加个性化的界面效果。下面是一个示例代码，演示了如何自定义底部tabBar： ```javascript // app.json { "tabBar": { "custom": true, "color": "#000000", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值