如何将整个网页变成灰色

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 8.9k累计阅读 8.9k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄20年

关注

转载最新推荐文章于 2023-12-11 13:07:00 发布 8.9k 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

转载自：http://www.gdiq.net/zc/zc_718.html

不知道firefox有没有效果,IE就一定行!
这是一个滤镜的效果
<style>
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>
如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入：
<head>
<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>
</head>
有一些网站可能css不能生效，是因为网站没有使用网页标准协议
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
请将网页最头部的<html>替换为以上代码。
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和</object>之间插入：
<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>
最简单的把页面变成灰色的代码是在head 之间加
<style type="text/css">
html {
FILTER: gray
}
</style>

收录于

转载

当前文章被收录于：

转载

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#html #filter #xhtml #css #flash

#firefox

一文带你了解网页的灰色效果是如何实现的最近，很多网站的外观都变成了灰色的效果，也包括我们的CSDN，很多朋友好奇这是怎么实现的，不仅网页上的元素都变成灰色的了，而且原本是彩色的图片也都变成了灰色，难道是将图片用PS重新做成了灰色版的然后再上传使用吗？接下来我就带大家了解一下网站灰色功能的实现方法。阅读详情

相关推荐

CSS - 让整个页面变成灰色（一行代码）

前言现在很多大厂产品，遇到清明节、南京大屠杀纪念日等节日，网站或软件就会变为灰色。在咱们小程序或网站中，实现起来非常简单，从各种鲜亮的颜色，一行代码变为如下图所示灰色：解决方案通过 filter: grayscale(100%) 滤镜属性，了解更多请点击这里。以下是使用的示例，您可按照方法应用到您的项目中。 <!DOCTYPE html> <html lang="zh"> <head> <style> /* 整个页面变灰 */ body

🏆 前端领域优质创作者 1万+

前端 filter 属性实现页面置灰功能 + 学习filter属性

措手不及ya的博客 950

FDTD脚本教程——结构的创建

文章目录结构的搭建创建长方体创建柱体多边形柱体（椭）圆柱体圆环柱自定义形状创建surface波导球棱锥在lumerical中，可以使用脚本进行操作，可在右侧脚本编辑器运行，或者直接在下方shell输入。结构的搭建创建长方体 um = 1e-6; nm = 1e-7; addrect; set("name","myRect"); set("material","SiO2 (Glass) - Palik"); set("render type","wireframe"); # 默认是细节渲染，也就是det

战斗果冻的训练中心 2万+

前端实现页面变灰功能(含 Flutter )

前端变灰效果这种在实际项目的过程中使用的比较少，一般在清明节、全国哀悼日、大地震的日子、以及一些影响力很大的伟人逝世或纪念日的时候使用，使用后的网站的网页变成灰色(黑白色)，以表示对逝者的悼念。今天从前端的角度出发，看看变灰的原理及实现过程。

公众号 @ 桃小瑞 1845

网站置灰的几种方式

L_TZzzz的博客 1513

让整个网站网页变灰的方法

一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今天就说说，通过几行简单的代码，来实现这个功能。第一种：修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰 CSS代码 html { filter: progi...

东北狼仙 1万+

页面如何置灰

最近页面都变灰色了, 让人看着是有些不舒服哈但是这个需求后面可能会遇到,想学习一下记录下来置灰方式: 关键技术: filter: grayscale(100%)在CSS文件中加考虑浏览器的兼容性,直接把兼容性的属性都搞上去第二种和上面很像,直接在网页的标签里面加上面的内容这个不推荐使用grayscale.js插件使用方法: grayscale.js插件源文件：http://cn.baiwanzhan.com/js/gray_baiwanzhan.jswindow.οnlοad=function

weixin_45620465的博客 863

CSS滤镜—使整个网页变成灰色

为追思疫情中逝世的同袍们，将4.4日定为了全国哀悼日，这一天，全世界都是“灰”的。当然我们感觉最深应该就是这一天你打开任何网站、软件，都是灰灰的一片。收到几个人的提问：“老师，这些软件、网站全灰的是怎么实现的，难道要全站都改样式？图片也要重新ps一份吗？”，一直还没来得及回答，今天在这里一起给大家回答这个为题。答案是：否怎样使整站变灰？对于web网站、小程序、webapp以及混合app来说，...

苦涩记忆 2285

重大灾难日让整个网页变成灰色(素色)效果的实现

郭亮均的博客 1142

网页中图片全显示黑白html,纯CSS代码将整个网站页面变成黑白色整站灰色

下面我就附上开启全站黑白的教程和代码吧，只需要一句 CSS 定义即可，要将整个网站变成灰色调，你不用去一张一张的改图片的色调，只需要在 css 文件的 html 节点上添加下面一条定义。html{-webkit-filter:grayscale(100%);}如果你的网站没有引用 css 文件，那么就可以直接引用下面这段 html 代码上面的 CSS 代码可能只对主流浏览器支持，如果你需要支持 Q...

weixin_35272691的博客 1672

网站都变成灰色，几行代码就搞定了！

当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。其实，解决方案很简单，只需要几行代码就能搞定了。通过参考资料，我总结出以下几个方法可以帮助我们达到目的：使这个网页的颜色变成灰色的...

qq_14958051的博客 237

网站都变成灰色了，它是怎么实现的？

可以看到，目前的主流浏览器版本都支持 grayscale 函数，比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。在网页端按下 F12，打开开发者模式，用元素选择器定位到 HTML 标签上，在「样式」的面板中往下翻，就可以看到这样一段代码。大致的意思就是，grayscale 是一个 CSS 函数，可以把图像转成灰色，参数是个百分比，结果返回一个 filter 函数。

沉默王二 8万+

整个网站变成灰色的效果是怎样实现的？

2020年的开始，是一个历史性的痛，我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难， 2020 年 4 月 4 日是清明节当天，全国下降半旗，北京时间 10 点，全国默哀三分钟，来致敬英雄们。同时，当天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。 2020年4月4日，我们发现各大平台的网站主页和内容都变成了灰色，比如百度、B 站、...

君子慎独，不欺暗室；卑以自牧，不欺于心 5014

CSS让整个网站变成灰色的做法

CSS让整个网站变成灰色的做法方法一：直接在css样式文件里加上这段代码 html{-webkit-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!–可以是整个网站变成灰色的–> 方法二：可以直接插入到网页/模板文件里 html{fi...

fntcw的博客 835

整个网页都设置成灰色，素色(css样式)

以下是效果图，最后面po了源代码！ <style type="text/css"> /*把整个网页都设置成灰色,素色*/ /* html { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1); } */ .allGray { ...

一只苟延残喘的卑微蝼蚁 8612

整个网页设置为全灰

如何把整个网页设置为全灰色(素色)？

一只苟延残喘的卑微蝼蚁 5922

CSS3 把整个网页设为灰色

卿本无忧的博客 1428

使整个网页变黑白色(灰色)的特效代码

全站CSS代码。 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。如果网站没有使用CSS，可以在网页/模板的HTML代码和之间插

香飘飘--专栏 9297

网站变成灰色用css实现

img{filter:Gray;}这样在css里定义了img标签所有图片采用灰色滤镜。可实现用一个图片显示不同颜色。以下为全站CSS代码显示灰色。 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。