置灰效果

最新推荐文章于 2022-12-12 17:09:03 发布
最新推荐文章于 2022-12-12 17:09:03 发布
阅读量377 收藏
点赞数
分类专栏： 笔记 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46692678/article/details/105366806
版权

归根到底就是一行代码

html{filter:grayscale(.95)}

增加前：
在这里插入图片描述

增加后:在这里插入图片描述

filter 这个css属性给对应元素增加一个滤镜，用来处理图片，背景的展示效果。
ie不支持

前端：设计的小姐姐不用切图了，这锅我背。
设计：我电脑都打开了，你跟我说这个…
…

未完待续…

我是腾腾啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UI界面置灰效果
04-28
游戏开发级别，UI界面置灰效果，针对于各种类型的置灰状态都可以进行调整，希望对你有所参考
UI灰色shader（置灰）
最新发布
03-12
本文将详细探讨Unity3D中实现UI置灰效果的Shader技术。 首先，让我们理解什么是Shader。在图形编程领域，Shader是一种程序，它运行在GPU（图形处理器）上，负责计算物体表面的颜色、光照、纹理等视觉属性。在Unity...
CSS 页面置灰等待效果
写博客只为学习
06-01 227
[code="html"] [/code] [code="css"] .tms-load-box{ display:inline-block; border: 2px solid #A1C5F7; padding: 13px 20px; background:#fff; position:fixed; z-inde...
Creator3D:shader_这种置灰效果看起来挺牛逼，原来实现起来这么简单
carlos13207的博客
10-13 604
前言 今天菜鸟来实现一个特别简单的效果，但是非常实用，因为菜鸟十一期间打发时间玩了一款枪战和一款武侠类游戏都用到了置灰这种效果。 效果 咱们还是先来看看效果： 正文 1.实现原理 实现原理，我们首先需要进行采样，然后对采样结果进行灰度操作，然后输出。 菜鸟对灰度化的处理操作为： 1.对模型贴图进行采样 2.对采样结果的r,g,b三个值取任意一个，使其他两个值与取的这个值一致，也就是r,g,b三值其实数值一样 2.代码 vec4 frag () { vec4 col = mainColor*tex.
置灰
alisa7的博客
05-11 374
webkit-filter: grayscale(100%);
前端页面添加灰色滤镜,使网页整体变灰
weixin_46995731的博客
11-26 2939
前端页面添加灰色滤镜,使网页整体变灰 只需要在html的样式里面加一句代码 html,body,div,img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+x
Html页面置灰css代码
05-06
其中，-webkit-filter、-moz-filter、-ms-filter 和 -o-filter 是用于不同浏览器引擎的 filter 属性，用于实现置灰效果。filter 属性用于将 Html 元素转换为灰度图像，而 progid:DXImageTransform.Microsoft.Basic...
按钮置灰的shader
06-05
5. 测试与优化：最后，进行测试以确保在不同的设备和光照环境下，按钮的置灰效果仍然清晰可辨，同时保持性能的高效。 总的来说，"按钮置灰的shader"是利用图形编程技术来增强用户界面交互体验的一种方法，它结合了...
iOS App页面置灰
热门推荐
缤纷冷泪的专栏
12-14 1万+
文章目录方法一：分别将图片和文字置灰UIImage转成灰度图UIColor转成灰度颜色方法二：给App整体添加灰色滤镜参考 App页面置灰，本质是将彩色图像转换为灰度图像，本文提供两种方法实现，一种是App整体置灰，一种是单个页面置灰，可结合具体的业务场景使用。 方法一：分别将图片和文字置灰 一般情况下，App页面的颜色深度是24bit，也就是RGB各8bit；如果算上Alpha通道的话就是32bit，RGBA(或者ARGB)各8bit。灰度图像的颜色深度是8bit，这8bit表示的颜色不是彩色，而是256
页面如何置灰
weixin_45620465的博客
12-07 618
最近页面都变灰色了, 让人看着是有些不舒服哈 但是这个需求后面可能会遇到,想学习一下记录下来 置灰方式: 关键技术: filter: grayscale(100%)在CSS文件中加 考虑浏览器的兼容性,直接把兼容性的属性都搞上去 第二种 和上面很像,直接在网页的标签里面加上面的内容 这个不推荐使用grayscale.js插件 使用方法: grayscale.js插件源文件：http://cn.baiwanzhan.com/js/gray_baiwanzhan.jswindow.οnlοad=function
根据 选中行数据状态进行按钮的展示和置灰功能
lzfengquan的博客
08-13 556
写一下需求 有两个按钮 要求 点击 第一个支付按钮 是根据 来源方式的 值进行可点击和不可点击（就是disabled true false) 前后对比一下图 状态不符合不可点击 状态值符合的时候可点击 代码如下 { text: ‘支付’, key: ‘pay’, icon: , // selectedCheckRows代表选种行， // some（）方法 // sourceMode 来源方式的值 disabled: selectedCheckRows?.some(item => item.sou
图片置灰的两种方法
zhangqq16781的博客
11-21 2098
项目加一个活动页，有的活动过期之后还要展示几天，但是显示灰色，过了某个期限之后就不予展示了。这么一个需求。给imageview加灰色图片的方法我网上查了一下用的这个： -(UIImage *)grayImage:(UIImage *)sourceImage {     int bitmapInfo = kCGImageAlphaNone;     int width = s
网站是如何实现置灰(带实现效果图)
qq_20623665的博客
12-02 662
网站是如何实现置灰(带实现效果图) blur() 函数用于设置元素**模糊效果，**它将高斯模糊视觉效果应用于元素。传递的 CSS 长度值越大，应用到元素的模糊度就越高。grayscale() 函数将改变输入图像灰度，该函数有一个参数，表示转换为灰度的比例。值在 0% 到 100% 之间，则是效果的线性乘数。大于或小于 100% 或 1 的值决定图像的暗度或亮度。其实这些属性最终的实现效果都是一样的，它们为了对 filter 属性进行兼容。
filter: grayscale(%)；设置灰色遮罩层后，怎样让头像颜色不受灰色遮罩层影响？
weixin_55409927的博客
12-12 808
filter: grayscale(%)；设置灰色遮罩层后，怎样让头像颜色不受灰色遮罩层影响？
前端实现项目整体页面变灰效果
qq_68183978的博客
12-02 298
前端使用css实现项目整体页面变灰效果
前端实现页面变灰功能(含 Flutter )
公众号 @ 桃小瑞
12-02 1410
前端变灰效果这种在实际项目的过程中使用的比较少，一般在清明节、全国哀悼日、大地震的日子、以及一些影响力很大的伟人逝世或纪念日的时候使用，使用后的网站的网页变成灰色(黑白色)，以表示对逝者的悼念。今天从前端的角度出发，看看变灰的原理及实现过程。
android 按钮置灰效果
Android翻山之路
06-11 1万+
通过设置可点击  和颜色实现 package com.yqy.yqy_button; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.view.View; import android.view.Vie
UI设计中置灰功能总结
Mr_GuoPengFei的博客
09-27 3336
　　我最近在梳理产品报错场景的过程中，发现“置灰”状态的使用可以有效的提升报错场景中的用户体验。今天我就针对UI设计中置灰功能总结进行简单的说明。 　　一、置灰 　　「置灰」是相对于「常态」而言的，代表着当前不可用。这里的「不可用」在不同的场景下有着不同的意思：在用户等级体系中，置灰的勋章意味着这个等级你还没有解锁;在卡券中心，置灰的卡券代表着这张卡券已经过期或者已使用。 　　为了让大家更好的理解，我将「置灰」分为两种。一种是「视觉置灰」，这种置灰仅限于视觉层面，不影响用户正常操作，就..
css置灰
05-25
你可以使用CSS的`filter`属性来实现置灰效果。具体实现如下： ```css .gray { filter: grayscale(100%); } ``` 这里的`100%`表示完全置灰，你也可以根据需要调整百分比来控制置灰程度。然后在HTML中添加对应的类名即可： ```html <div class="gray">这是一段需要置灰的文本</div> ``` 除了`grayscale`之外，`filter`属性还可以使用其他值来实现不同的效果，比如模糊、饱和度调整等等。具体可以参考CSS文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值