灰色html颜色代码—html深灰色 收藏 0

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

大家看到网站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？

有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是变成生产事故要扣奖金了。

百度：

百度

京东：

京东

今日头条：

今日头条

慕课网：

慕课网

给大家总结出一段规范的代码，把这段代码加入网站页面的CSS里面即可实现页面变成灰色的效果：

规范代码

filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);

一、blur(px)高斯模糊

给图像高斯模糊。如果没有设定值，则默认值是0；这个参数可设置css长度值，不接受百分比值

二、brightness(%)亮度

使图像看起来更亮或更暗。值是100%，图像无变化，超过100%，变亮，小于100%，变暗。

三、contrast(%)对比度

四、drop-shadow(x y blur speed color) 阴影效果

与box-shadow效果上有显著的区别

五、grayscale(%)灰度

六、hue-rotate()色相旋转

七、invate(%)

反转输入图像。值为100%是完全反转。 值为0%则图像无变化。0%~100%之间，则是效果的线性乘子。

八、opacity(%)

转化图像的透明度。值为0%则是完全透明。值为100%则图像无变化

九、saturate(%)

转换图像的饱和度。值为0%则是完全不饱和，值为100%则图像无变化。值允许大于100%，会有更高的饱和度。

十、sepia(%)

将图像转为深褐色。值为100%则完全是深褐色

十一、复合函数

使用多个滤镜，每个滤镜使用空格分割。

注意：顺序是非常重要的（例如使用grayscale()再使用sepia()将产生一个完整的灰度图片）

filter效果示例

开发者必备！用纯 CSS 搞定网站黑暗模式

最近上线了一个用户管理后台，忙得焦头烂额。没想到上线后的用户反馈让我直冒冷汗：“网站晚上用着太刺眼了，能不能加个黑暗模式？”

你是不是也遇到过这种需求？产品经理随口一说，用户随手一提，结果改需求的锅就甩到了开发头上。乍一看，这功能要动前端框架甚至后端逻辑，简直头大。

但别怕！其实不需要动用 JS 大杀器，仅靠 CSS 就能搞定黑暗模式。而且代码简单，效果炸裂，还能秒刷用户好感度！今天就带你用纯 CSS 分分钟实现网站“白天光明、晚上护眼”的黑暗模式。

在开发中，最好的方式就是将复杂功能拆解为小块，我们一起来看下用纯 CSS 实现黑暗模式的具体步骤：

假设我们要为一个电商后台的订单管理系统添加黑暗模式。先准备一个简单的 HTML 页面，内容包括标题和一个订单列表：

这是一个普通后台的基础页面，结构简单清晰，接下来就让 CSS 为它“点亮”光明与黑暗！

默认情况下，用户使用的大多是“光明模式”。我们先为这个界面定义一个清爽的默认样式：

亮点分析：

• 白色背景 + 黑色文字：光明模式的经典搭配，清新明快。
• 平滑过渡：通过 transition 属性，保证模式切换时视觉效果更流畅。
• 表格样式：用灰色表头和边框区分内容，整体观感更专业。

有了光明模式，接下来让 CSS 黑暗模式“自觉”上线！借助 @media (prefers-color-scheme: dark)，我们可以让浏览器自动检测用户的系统设置，并为其加载深色主题：

黑暗模式优化：

1. 深灰背景：#121212 的灰色比纯黑更护眼，细腻而不过分强烈。
2. 柔白文字：避免用纯白文字，#e0e0e0 更舒适。
3. 表格配色调整：将边框和表头背景换为深灰，整体风格一致。

虽然光明模式已经是默认样式，但在实际开发中，为了防止其他样式覆盖，可以显式声明光明模式：

这样一来，光明和黑暗模式都得到了清晰的定义。

将所有代码整合后，你的 CSS 文件如下：

这次实现的黑暗模式，不需要一行 JS，只需几行 CSS，让你的页面可以自动适配用户设备的光明和黑暗主题。不仅代码量小，而且兼容性好（支持现代主流浏览器）。

在以下场景中，黑暗模式能显著提升用户体验：

1. 后台管理系统：开发者和运营人员长时间使用后台时更护眼。
2. 夜间阅读网站：如博客、新闻网站，降低视觉疲劳。
3. 设备省电：OLED 屏幕在深色模式下更省电。

那么问题来了：

• 你觉得黑暗模式对提升用户体验是否有帮助？
• 在你的项目中，有没有用过类似的黑暗模式？如何实现的？

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com