网站默哀灰色主题怎么实现?

简介: 网站默哀灰色主题怎么实现?

我之前一直以为实现这种灰色的主题很复杂需要写很多样式,今天发现可以使用 css 的 grayscale() 样式进行实现。

f44f9a4ea157480ca4bf179c2fe79c2c.png


比如:我们以 csdn 博客网站为例,把下面我的博客变成灰色的

38ce4080554d43ceaa8a5ef92b963469.png



我们只需要在 html 跟元素添加下面样式即可

html {
  filter: grayscale(1);
}

7e64bfeb74f048f6848eaf52a9ec7392.png

加了之后就会发现主题已经变灰色了,是不是非常的简单。

具体的 grayscale 用法可以参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale

目录
相关文章
|
XML Web App开发 SQL
一文带你了解网页的灰色效果是如何实现的
一文带你了解网页的灰色效果是如何实现的
209 40
|
7月前
|
前端开发 JavaScript API
如何实现两栏布局?这篇文章告诉你所有的细节!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
7月前
|
存储 前端开发 JavaScript
Web前端主题色更换实现方式全解析(一)
Web前端主题色更换实现方式全解析(一)
113 1
|
3月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
64 11
|
6月前
|
XML IDE 开发工具
Eclispse 换主题、皮肤、配色,换黑色主题护眼
Eclispse 换主题、皮肤、配色,换黑色主题护眼
143 1
|
7月前
|
存储 前端开发 JavaScript
Web前端主题色更换实现方式全解析(二)
Web前端主题色更换实现方式全解析(二)
221 0
|
7月前
|
JavaScript 前端开发
【UI】 网站都变成灰色了,它是怎么实现的?
【UI】 网站都变成灰色了,它是怎么实现的?
51 0
聊天框(番外篇)—如何实现@功能的整体删除
上一篇文章中,我们已经初步实现了聊天输入框,但其@功能是不完善的,例如无法整体删除、无法获取除用户名以外的数据(假设用户名不是唯一的)。有问题就要想办法解决,在网上百度了一圈后,倒是有一些收获。本文就着重解决@的整体删除以及获取额外数据。
1119 0
聊天框(番外篇)—如何实现@功能的整体删除
vs背景和主题设置(一看就会,简单实用)
vs背景和主题设置(一看就会,简单实用)
|
JSON 小程序 前端开发
细说小程序底部标签---【浅入深出系列006】
细说小程序底部标签---【浅入深出系列006】