大家好，网站变灰了，几行代码就搞定了相信很多的网友都不是很明白，包括也是一样，不过没有关系，接下来就来为大家分享关于网站变灰了，几行代码就搞定了和的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
大家看到网站的内容都变成了灰色，包括按钮、图片等，这时候我们可能会想这是怎么做到的呢？
有人会认为所有内容都统一改成了CSS样式，所有图片都改成了灰色，按钮等样式也都改成了灰色。但仔细想想，成本太高了，而且如果某个控件忘记添加灰色样式，就会成为生产事故，奖金也会被扣除。
解决方案很简单，只需要几行代码就能搞定了。F12看下各大网站怎么实现的。
百度：
百度
京东：
京东
今日头条：
今日头条
慕课：
慕课
让我为您总结一段标准化代码。在网站页面的CSS中添加这段代码，即可实现页面变成灰色的效果：
标准代码
Filter的意思是滤镜，filter:gray的意思是在页面中添加灰度滤镜，这样HTML中的所有内容都会变成黑白的。不过这个滤镜对于chrome和safari浏览器无效，所以下面会有一行-webkit-filter: Grayscale(100%);
扩展：CSS3 filter(滤镜)
1.模糊（px）高斯模糊
使图像具有高斯模糊效果。如果没有设置值，则默认值为0；该参数可以设置css长度值，不接受百分比值。
img { -webkit-filter: 模糊(5px); /* Chrome, Safari, Opera */filter: Blur(5px);} 2. 亮度(%) 亮度
使图像显得更亮或更暗。如果值为100%，则图像保持不变；如果超过100%，就会变得更亮；如果低于100%，颜色会变暗。
filter: 亮度(150%) 3.对比度(%) 对比度
filter:对比度(200%) 4. drop-shadow(x y模糊速度颜色)阴影效果
filter-shadow:（50px 50px 5px 番茄）和box-shadow 之间存在显着差异。
5. 灰度(%) 灰度
filter: 灰度(100%) 6.hue-rotate() 色调旋转
filter: 色调旋转(100%) 7. invate(%)
反转输入图像。 100% 的值是完全反转。值为0% 表示图像没有变化。在0% 和100% 之间，它是效果的线性乘数。
filter: invate(100%)8、不透明度(%)
转换图像的透明度。 0% 的值是完全透明的。如果该值为100%，则图像不会发生变化。
滤镜： 不透明度(100%)9、饱和度(%)
转换图像的饱和度。值为0% 表示图像完全去饱和，值为100% 表示图像没有变化。允许大于100%的值，这将导致更高的饱和度。
filter: 饱和(100%) 十、棕褐色(%)
将图像转换为棕褐色。 100% 的值为完全深棕色
img { -webkit-filter: 棕褐色(100%); /* Chrome, Safari, Opera */filter: sepia(100%);} 11. 复合函数
使用多个过滤器，每个过滤器之间用空格分隔。
注意：顺序非常重要（例如，使用grayscale()，然后使用sepia()将生成完整的灰度图像）
原创文章，作者：小su，如若转载，请注明出处：https://www.sudun.com/ask/153631.html
用户评论
▼遗忘那段似水年华
哇！这个真的太酷了！我之前想过要给我的网站做一个灰色的主题，但感觉非常麻烦。没想到这么简单就能搞定，我一定要试试看！
有12位网友表示赞同！
旧事酒浓
灰色主题好像挺流行的啊！不过我不太喜欢这种感觉… 我更喜欢一些明亮的颜色，让人看起来更加舒服。你们觉得呢？
有19位网友表示赞同！
笑叹★尘世美
我虽然对代码不太懂，但是看到这个标题就感觉很有用！我有很多网页都是蓝黑色的风格，换成灰色可能更容易突出内容吧！
有17位网友表示赞同！
搞搞嗎妹妹
几行代码就能实现灰色主题？这得是中国新一代程序员的厉害之处吧！我以前写代码都是看着各种大篇的教程… 简洁到这种程度是我永远达不到的境界。
有13位网友表示赞同！
烬陌袅
我也要换个灰色主题试试，我的网站现在感觉有点花哨，不好阅读。这个方法真简单粗暴，太适合新手了！
有16位网友表示赞同！
軨倾词
这真的太危险啦！网站变成灰色谁知道怎么回事啊？万一影响用户体验怎么办？还是得留一些颜色装饰一下比较合适吧…
有13位网友表示赞同！
海盟山誓总是赊
这个功能虽然方便，但我觉得网站不应该都是灰色，这样会给人一种冰冷的感觉。还是要根据网站的内容和主题选择合适的配色方案!
有17位网友表示赞同！
来自火星球的我
我也试了一下，真的只需要几行代码！而且效果也很明显，网站看起来干净简洁了很多。赞啦！
有14位网友表示赞同！
淡抹烟熏妆丶
虽然是灰色，但是感觉比以前更时尚了？我开始觉得灰色越来越受欢迎了呢！
有11位网友表示赞同！
ー半忧伤
灰色的确有一种比较简约的氛围，对于一些需要专注于内容的网站来说蛮适合的，比如技术博客之类的。
有12位网友表示赞同！
微信名字
这个方法简单易用，确实可以提升效率！不过我还是喜欢多点颜色，能让网站看起来更有活力一些。
有14位网友表示赞同！
苍白的笑〃
灰色主题真的挺百搭的… 但是我感觉很多时候还是需要根据不同的内容来选择合适的配色方案，单纯的灰色主题可能会显得过于单调。
有19位网友表示赞同！
轨迹！
这方法真的很实用啊！以前每次修改网站颜色都会费好多时间，现在直接几行代码搞定真是太爽了！
有11位网友表示赞同！
柠栀
我只是想问问那些说只有几行代码就能实现的各位同学，你们是在哪种平台上操作的？我这边试了好久还是没有效果…
有6位网友表示赞同！
放肆丶小侽人
我觉得灰色主题很高级的样子，而且不会过分抢眼。如果能通过简单的方法实现的话真的非常棒！
有6位网友表示赞同！
全网暗恋者
网站变成灰色可能会让人感觉比较沉闷和严肃一点，不太适合某些类型的网站，还需要根据用户的需求来决定!
有10位网友表示赞同！
孤街浪途
这个方法确实很有实用价值，可以省去很多时间和精力！我以后一定要试试看，给我的博客换个新的灰色主题！
有20位网友表示赞同！
拥菢过后只剰凄凉
我还是喜欢多点颜色，让网站看起来更生动一些。灰色有点过于保守了，感觉没有一点活力…
有19位网友表示赞同！