微信小程序设置灰色滤镜

已于 2022-12-01 10:44:53 修改
阅读量779 收藏
点赞数
分类专栏： 小技巧 文章标签： 微信小程序 小程序
于 2022-12-01 10:16:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guozai0904/article/details/128127345
版权

微信小程序变成灰色的方法

首先找到工程根目录的app.wxss 文件

 然后再顶部追加css过滤器

当小程序grayscale属性设置成100% 或者1 的时候为灰色

page{
    filter: grayscale(1)
}

编译，预览，上传，审核，上线 一气呵成

guozai0904
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 CSS filter（滤镜）的使用示例详解
09-27
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。接下来通过本文给大家介绍微信小程序 CSS filter（滤镜）的使用示例，感兴趣的朋友一起看看吧
基于CamanJS的微信小程序Canvas像素级滤镜处理库
08-10
基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库
微信小程序和网站显示灰色方法
weixin_43452154的博客
12-01 2805
此时大家发现很多网站,app,小程序的整体色调全部变为了灰色,其实并不是所有的图标全部替换了灰色,只是在css中设置了一个属性只要加上css样式即可 全局可以在app.wxss全局的样式文件中设置，若是单个页面调控，可以在单个页面调试和小程序一样，只需增加css样式即可 但是兼容不到ie10和ie11浏览器。需要调用js 当我们是ie10和ie11浏览器的时候，调用graystyle的js函数即可。 至此，网站变灰的方案就完美了。完美兼容各种浏览器，笔者已经在生产环境使用过了，大家放心使用。喜欢
微信小程序css篇----背景（Background）与颜色（Color）
热门推荐
鎏嫣宫守护的博客
12-30 14万+
一。背景：background。设置对象的背景特性。一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后面背景图上。 1.background-color：指定背景的颜色。取值：正常的颜色取值。 2.background-image：背景图片。 如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文
关于微信小程序上传按钮是灰色不能点击的问题
胡聊前端的博客
11-22 9290
首先确保你的微信开发者工具是否填写了小程序id。网上有说管理员无法上传的，但是我这里角色就是管理员，且没有把管理员配置开发者（事实上你也不能配置…） 如果没有请添加小程序id即可就可以上传了。 此外，如果使用的是uni-app。请确保在一下文件中配置了小程序id 最后如果你切换了项目，需要重新配置小程序id。所以多检查一下总是没有错的。 ...
微信小程序图片滤镜插件，高斯模糊、马赛克、灰度效果等weImageFilters-master.zip
09-25
微信小程序图片滤镜插件，高斯模糊、马赛克、灰度效果等weImageFilters-master.zip
wx-caman——基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库
weixin_34368949的博客
06-21 511
做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 canvas 组件与 DOM Canvas 元素有较大差异，因此传统的 Canvas 处理库几乎无法在小程序中使用。在调研了一些传统浏览器端的项目后，我发现 CamanJS 的功能比较完善，同时也比较容易对微信小程序进行适配。在阅读完毕 CamanJS 源码（顺便学习了一下 Coffee...
小程序 点击背景色有灰色部分 （navigator ）
sky_sunshine_x的博客
09-03 2339
开发小程序在使用navigator 标签时，发现点击后背景中有一部分是灰色，设置其属性hover-class="none"则不显示背景色
微信小程序滤镜工具weImageFilters
weixin_33860553的博客
09-06 1030
声明 滤镜处理的代码99.9%来自于arahaya/ImageFilters.js，我这里只是做了一些小改动，使其能在微信小程序里使用。 版本要求 基础库 1.9.0 简介 最近发现一个网页上好用的滤镜库，滤镜效果有几十种，就稍微做了一些更改，使其能在微信小程序使用。 下面的效果图均由微信开发工具模拟器生成，并且在自己手机上也测试过，能正...
小程序图片滤镜效果
mingjuna2010的博客
01-13 1290
① css样式添加该样式，使图片加上灰色“滤镜”效果： filter: grayscale(1) !important; ② 你所谓的阴影效果： filter: drop-shadow(2px 2px 3px #999); ③ setData数组的某一个下标的值“ let exe = `executionTimes[4].executionTime` this....
CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例
05-08
前言 之前在看七月老师的视频的时候，看到了有一个样式是-webkit-filter，不知道是什么，于是查了一下，原来是滤镜吖。但是在微信小程序里使用的时候，下面一直飘红线，再仔细查了一下，原来是在Chrome, Safari, Opera中使用 -webkit-filter，而微信小程序里使用的话，使用filter就可以了。一时间好奇了下，就多试了几个函数，以下是详细的笔记 定义 filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。 分类 none 默认值，没有效果。 blur() 高斯模糊 brightness() 亮度 contrast() 对比度 drop-shadow() 阴影 grayscale() 灰度 hue-rotate() 色相旋转 invert() 反色 opacity() 透明度 saturate() 饱和度 sepia() 复古色 ur
微信小程序设置滚动条过程详解
10-16
主要介绍了微信小程序设置滚动条过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序tabBar设置实例解析
10-15
主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序 实例汇总 完整项目源代码
微信小程序 小程序官方Demo (源码)
05-31
微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小...
怎么用微信小程序实现远程控制台球室
最新发布
tyanzhiqi的专栏
04-30 547
怎么用微信小程序实现远程控制台球室呢？本文描述了使用微信小程序调用HTTP接口，实现控制台球室，控制球台上方的照明灯，单台设备可控制多张球台的照明灯。
【微信小程序调用百度API实现图像识别实战】-前后端加强版
m0_63057469的博客
04-27 857
微信小程序图像识别项目实战全面升级，前后端结合+数据库
微信小程序实现九宫格
weixin_45465881的博客
04-30 196
更多示例，关注我，分享更多呦~
微信小程序按钮灰色无法点击
05-11
通常情况下，微信小程序按钮灰色无法点击可能有以下几种原因： 1. 按钮被设置为 disabled 状态，需要将其设置为可用状态。 2. 按钮被覆盖了其他元素，导致无法点击。可以检查一下按钮周围是否有其他元素挡住了它。 3. 按钮绑定的事件出现了错误，导致无法触发。可以检查一下按钮绑定的事件是否有报错信息。 4. 按钮的 z-index 值设置不正确，导致被其他元素遮盖。可以调整一下按钮的 z-index 值。 以上是可能导致按钮灰色无法点击的原因，你可以根据具体情况进行排查。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值