CSS设置网页全部变暗!

html-css0220

CSS设置网页全部变暗!,第1张

是使用了一个CSS滤镜

<head>和</head>之间插入:

<style>

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}

</style>

如果简单点的话只要:

<head>和</head>之间插入:

<style>

html{filter:gray}

</style>

如没有生效的话,是因为网站没有使用最新的网页标准协议,在网页最上面添加如下代码就可以了:

<!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

{

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

}

将这段代码粘贴到你css文件的最顶端,你明白怎么弄的,后面的数值你也可以自己改。

给分吧

prefers-color-scheme ( https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme ) 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。利用其设置不同主题模式下的 CSS 样式,浏览器会自动根据当前系统主题加载对应的 CSS 样式。light 适配浅色主题,dark 适配深色主题,no-preference 表示获取不到主题时的适配方案。

浅色模式效果如图:

深色模式效果如图:

window.matchMedia ( https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia ) 方法可以用来查询指定的媒体查询字符串解析后的结果。结合 CSS 变量和 matchMedia 的查询结果,设置对应的 CSS 主题颜色。该方法更灵活,可以单独抽离主题色进行适配,深色模式匹配 (prefers-color-scheme: dark) ,浅色模式匹配 (prefers-color-scheme: light) 。

监听主题模式,深色模式时为 body 添加类名 dark,根据 CSS 变量的响应式布局特点,自动生效 dark 类名下的 CSS。

浅色模式效果如图:

深色模式效果如图: