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

最新推荐文章于 2024-06-27 09:27:22 发布
最新推荐文章于 2024-06-27 09:27:22 发布
阅读量1.2w 收藏 70
点赞数 10
分类专栏： 移动端 文章标签： 小程序 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50874065/article/details/118399833
版权
本文介绍了如何在微信小程序中设置背景图片，并通过wxss应用滤镜实现毛玻璃效果。首先在wxml中使用image标签指定图片地址，然后在wxss中设置图片的尺寸和层级，最后通过添加filter: blur(10rpx)实现模糊效果，创建美观的背景。
摘要由CSDN通过智能技术生成

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

图1

1. 在wxml中使用标签指定背景图片地址

<view class="index">
<image class="bg"
最低0.47元/天 解锁文章
java猿小白
关注
专栏目录
仿微信个人主页——微信小程序页面设计
清墨的博客
02-10 1万+
仿微信个人主页——微信小程序页面设计 微信小程序页面设计：在这里仿微信个人主页做一个初步的还原，非高保真！！ 上图： （这里设计的是未更新微信最新版8.0.0的页面，图片放的8.0.0的） 先上代码吧！ wxml 等等 wxss 在这里插入代码片 ...
微信小程序图片和背景图片属性
m0_72168336的博客
12-11 1840
微信小程序图片image和背景图background的属性
微信小程序页面背景色始终铺满整个窗口设置
最新发布
A_z2019的博客
06-27 405
【代码】微信小程序页面背景色始终铺满整个窗口设置。
微信小程序 图片绝对定位(背景图片)
08-30
主要介绍了微信小程序 图片绝对定位(背景图片)的相关资料,需要的朋友可以参考下
四种方法解决微信小程序设置背景图片，哪种最好？
qingyangcc123的博客
11-27 9575
做了许久的小程序，现在选择用博客记录我遇到的问题以及问题的解决办法，也分享给大家一些自己的心得，记录如下： 问题描述 在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题。 代码： .bg{ width: 750rpx; height: 540rpx; background-image: url(../../images/head_bg.png); } 在页面使用这个样式的时候小程序会报错。 解决方案 小程序背景图片无法直接使用本地图片。有4种解决方案： 使用
微信小程序 背景图。
北海_南风
05-14 718
微信小程序的背景图片，效果如下： .wxml代码： <view class="bj"></view> .wxss代码： /* pages/beiJing/beiJing.wxss */ .bj { background-image: url("https://tpc.googlesyndication.com/daca_images/simgad/12533696403315878274"); /* 定位：绝对定位 */ position: absolute; /
微信小程序 背景图片设置
热门推荐
weixin_43736639的博客
03-22 3万+
微信小程序设置背景图片时，有两种方法： 第一：直接在.wxss中中使用 “background-image:url()” 设置背景图片，但是这种加载背景图片的方法存在一个问题，就是所加载的图片只能是网络图片或base64图片，是不可以加载本地图片的。 但是使用base64图片也存在弊端，（1） base64 编码后比原图要大；（2）如果把大图片编码到 html / css 中，会造成后者体积明显增加，明显影响网页的打开速度。 本地图片转换成base64图片...
微信小程序背景图片
qq_46126537的博客
05-30 841
微信小程序 button 的样式设置为图片的方法
10-15
最后，对于微信小程序button样式设置为图片的所有这些方法，在实现时都需要对wxml、wxss和可能的js代码进行相应的调整。开发者应该结合具体需求和场景选择最合适的实现方式，以确保最终用户界面的可用性和美观性。...
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 首先，微信小程序提供了`navigationStyle`属性，允许开发者禁用默认的导航栏并自定义样式。...
微信小程序基于canvas实现纯色背景抠图功能
06-11
微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现...
微信小程序如何设置背景图片
weixin_48661004的博客
12-09 1万+
微信小程序如何设置背景图片 如何全屏显示 导航、标题配置图片背景
微信小程序 背景图
sinat_33384251的博客
10-29 412
.help_input{ height: 30vh; width: 100%; background-size: 100% 100%; background-image: url(http://load1a.nipic.com/file/20201029/Nipic_32374556_2020102201029112841); }
微信小程序设置背景图的几种方式
血色天空的专栏
03-15 2万+
在开发工具上显示ok，结果拿着手机预览，图片显示不出来，看来这种也不行，哎只能乖乖的按那三种提示进行设置背景图片啦。中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。2.base64格式的图片,访问。3.使用标签。上传图片生成base64。
小程序 设置背景图片
Young_Gao的博客
01-20 1579
使用 /static/img/aaa.png 这种路径是不行的， 上述你在编译器里能看到，但是到了手机里就看不到了   建议使用 url 或者 base64 转码   这里是图片转码传送门    http://imgbase64.duoshitong.com/...
微信小程序怎么设置背景图片？
m0_51567383的博客
04-22 228
原理是用绝对定位与z-index配合 wxml <view class="container" bindtap="to_openvip"> <image class="huiyuan_yingdao" src='/images/me/huiyuan_yingdao.png'></image> <view class='up'> 我是左边文字 </view> <view cla
小程序之 背景图片的使用
gyueh的博客
03-22 410
本地资源图片无法通过 WXSS 获取，可以使用网络图片、 base64、或使用<image/>标签 1.wxml文件中背景图片的使用: 在最外的父元素使用background-image引入 <view style="background-image: url('../images/文件');height:500px;">111111</view> 2. wxss文件中背景图片的使用: 使用网络图片或者base64格式的图片 background-image: url(
微信小程序背景图片铺满
09-05
要实现微信小程序背景图片铺满的效果，你可以使用 `background-size` 属性来控制背景图片的尺寸。这个属性可以设置为 `cover` 或 `100% 100%`，具体取决于你想要的展示效果。 在你的小程序样式文件中，可以按照以下方式设置背景图片的样式： ```css .page { background-image: url('your-background-image-url'); background-size: cover; background-repeat: no-repeat; background-position: center; } ``` 上述代码中，`.page` 是你想要设置背景图片的页面或组件的选择器，`your-background-image-url` 是你自己的背景图片链接。 通过设置 `background-size: cover`，背景图片会被自动缩放并裁剪，以使其完全覆盖父元素。如果你不希望裁剪图片，可以设置 `background-size: 100% 100%` 来让背景图片完全适应父元素的尺寸。 记得在 HTML 文件中引入你的样式文件： ```html <view class="page"> <!-- 页面内容 --> </view> ``` 这样就可以让背景图片铺满微信小程序页面了。希望能对你有所帮助！如有任何其他问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值