CSS3:filter 滤镜（公祭日全网变灰效果实现）

最新推荐文章于 2022-12-23 14:59:18 发布
最新推荐文章于 2022-12-23 14:59:18 发布
阅读量811 收藏 4
点赞数 1
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41801013/article/details/105550676
版权

CSS3:filter 滤镜

filter介绍

4.4日国家公祭日实现全网一键变灰的根本原因是css3的滤镜属性：filter，除了一键变灰，还可以给图片美颜。

属性功能介绍

1.一键变灰，全网一键变灰原理

  	img {
   
  		  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
		  filter: grayscale(100%);
  	}
  1. 模糊图片 ，不用给图片使用蒙版，便可直接模糊图片；
  	img {
   
  	    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  	    filt
最低0.47元/天 解锁文章
菜菜的小前端
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何基于filter实现网站整体变灰功能
10-15
在本文中，我们将深入探讨如何使用CSS滤镜（filter）属性来实现网站整体变灰的效果。这个功能在一些特殊纪念日或悼念活动中被广泛使用，例如政府网站在公祭日时会将网页变为灰色调以表达哀思。我们将提供一个简单的...
效果代码及说明.txt
04-07
在国家公祭日，各种祭奠日时，要求网站需要在规定时间段内变灰，这段代码提前设置网站变灰效果，整页面变灰，按说明使用，修改时间即可。
全国哀悼日全站变灰CSS怎么码？
Boboy
04-10 253
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht...
政府网站公祭日，如何使网站整体变灰
qq_45633169的博客
12-13 89
政府网站公祭日，如何使网站整体变灰_经典鸡翅-CSDN博客
国家公祭日网站变灰(原创)
InetGeek的博客
03-09 3592
因为身在高校就读负责维护学院网站，为响应国家公祭日(2020-12-13)缅怀先烈、铭记历史，一整天需要网站变成全灰色，但如果直接当天改代码很麻烦，于是自己就写了一个js脚本来解决这个问题，让网站在12月13日全网自动变成灰色，于14日自动恢复正常。需要的可以copy，唯一的要求就是请备注代码来源：https://www.digran.cn (Digran's Blog) <script> var date = { thisDate: function (beginDateStr, en
国家哀悼日，所有网页的主题色都变成灰色是怎么做到的？
weixin_45393280的博客
04-04 7540
今天是全国人民向抗击新型冠状病毒肺炎疫情斗争牺牲的烈士和逝世的同胞表达哀悼的日子，为了响应号召，各大网站都把自己网站的主题色变成了灰色。 闲在家里无事浏览网页时我就很好奇，是怎么能做到把整个网页的字体、图片、背景图都变成灰色的呢？网上搜了一下，原来只需要很简单的代码就能实现。。 html { -webkit-filter: grayscale(100%); filter: progid:DXI...
filter 灰度处理：公祭日，一行代码让页面变成黑白色调
白鹿第一帅的 CSDN 博客
01-28 2432
公祭日其世界意义在于，促使人类历史记忆长久保持唤醒状态，而避免出现哪怕是片刻的忘却与麻木，共同以史为鉴、开创未来，一起维护世界和平及正义良知，促进共同发展和时代进步。可能也会有小伙伴们好奇，公祭日当天好多大型网站主页都变成了黑白色调，用以提醒人们铭记历史，勿忘国殇，在技术层面看这是如何实现的呢？
水泥制造：12月3日起南京水泥停产，华东供需缺口放大，看好高弹性品种上峰水泥.pdf
08-26
报告指出，自2014年起，南京每年11月至次年2月底都会实施冬春季节空气环境质量保障管控方案，今年的管控措施自12月3日开始，预计将影响全市的水泥和铸造行业，以及部分建筑工地。这种临时性的停产政策旨在减少大气...
h5页面置灰处理源代码，兼容IE（优雅降级提供下载浏览器链接）
01-08
我找了下之前在南京遇到公祭日时候，做过类似的操作，为了方便当时用原生js写了一个，这样的好处是不依赖jq之类的，需要时候引入不需要时候废弃就行。 对与IE的兼容，我们做的是优雅降级，在IE的时候提示让用户去...
七年级历史上册第一单元史前时期：中国境内人类的活动第3课远古的传说知能演练提升新人教版
08-05
3. **黄帝的贡献**：黄帝被认为是中华民族的始祖，传说中他有许多发明创造，如建造房屋、制作衣物、发明船只和挖掘水井，这些都体现了古人生活技能的进步。 4. **炎帝与黄帝的关系**：炎帝和黄帝是两个重要的部落...
css filter滤镜详解
07-21
详细说明了css滤镜的一些常用方法以及各浏览器兼容问题
全网站变灰，公祭日活动界面如何实现？
lx583274568的专栏
04-07 714
html { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 第一行是基本实现，第二行针对IE的浏览器。 补充，ie10 11不兼容老ie的activex方式 原文链接 ...
前端实现网站悼念【灰色效果】几行代码轻松解决
最新发布
在写作的路上持续输出。
12-23 1049
前端实现网站悼念【灰色效果】几行代码轻松解决
页面整体变为灰色 -- CSS3 filter(滤镜) 属性
beijixing333y的博客
12-01 1004
CSS3 filter(滤镜)
公祭日页面样式变灰
qq_43432157的博客
01-12 572
html { height: 100%; FILTER: gray; -webkit-filter: grayscale(100%); }
公祭日网站变灰白色效果
jiuyisir的博客
04-08 1161
四天前 · 星期六 · 清明节   2020年，一个很不平凡的年度。鼠疫、新型冠状病毒肺炎和就在清明节前夕的西昌山火。在这一段时间里我国经历很多惨痛的时刻，很多英雄“逆向而行”去到了最危险的前线保护人民群众生命财产的安全！更有很多英雄烈士在保护救助人民的途中倒下了、遇难了！就在这个庄严肃穆的时刻（2020.04.04—清明节）我国全国降下半旗，也在北京时间AM10:00行人驻足、汽车鸣笛全国默哀三...
vue/Nuxt实现当年或每年哀悼日网站全站变灰
熟悉JS拼写的FE
08-10 1222
html/css/vue根据时间全站自动变灰1. 当年时间-全站变灰2. 如果要设置每年固定日期变灰（我这里只设置了国家公祭日(南京)和汶川地震）2.1这里演示在vue项目中如何使用vue-cli中使用Nuxt中使用3. 如果单单想试试效果最后如果用到的小伙伴，点个赞鸭（最好来个关注????????????????） 友情提示:此篇代js码基于jQuery实现 1. 当年时间-全站变灰 如果是设置当年的事件(以疫情为例) // 1.得到当前的时间 var nowTime = new Date(
CSS滤镜filter切换图片
a274915611的专栏
10-26 1462
前几天,在这个论坛里看到了一个帖子:简单的JS网站焦点广告轮换效果实例 网址:http://softbbs.pconline.com.cn/topic.jsp?tid=8668846 那编帖子是很不错的,给出了一个好例子.作者亦在http://www.wcplym.com/techArticleDetail.asp?id=92 这个实际页面里给出了详细解释，不过，我认为作者并没有从根本说起，只是给
css滤镜效果
jetsusu的专栏
07-25 410
  我们可以用CSS样式的filter（滤镜效果）对HTML的一些标记设置滤镜效果。例：黑白照片 filter: gray; X光照片 filter: Xray; 风动模糊 filter: blur(add=true,direction=45,strength=30); 正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1,

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值