光之晨曦🌟🌟🌟

vuePress-theme-reco 晨曦    2021 - 2022
光之晨曦🌟🌟🌟 光之晨曦🌟🌟🌟

Choose mode

  • dark
  • auto
  • light
首页
前端开发
  • CSS
  • FrontEnd
  • GraphQL
  • JS基础语法
  • JavaScript
  • TypeScript
  • Vue
  • Webpack
  • 数据结构与算法
  • 浏览器相关
  • 推荐文档
JS指南
  • JS基础相关
  • ECMAScript 6
  • OOP面向对象编程
  • JavaScript设计模式
前端框架
  • Vue相关

    • Vue基础相关
    • Vue官方生态
    • Vue.js的设计核心
性能优化
  • 前端缓存

    • HTTP缓存
    • 数据缓存
    • 离线缓存
    • CDN缓存
  • 优化方案

    • SEO方向的优化方案
    • Webpack的性能优化
    • Canvas性能优化方案
    • 了解常见的Web、App性能优化方案
    • React、Vue框架使用性能优化方案
前端工程化
  • 部署
  • Git
  • Vite
  • WebPack
第三方拓展
时间线
关于
GitHub
author-avatar

晨曦

82

文章

61

标签

首页
前端开发
  • CSS
  • FrontEnd
  • GraphQL
  • JS基础语法
  • JavaScript
  • TypeScript
  • Vue
  • Webpack
  • 数据结构与算法
  • 浏览器相关
  • 推荐文档
JS指南
  • JS基础相关
  • ECMAScript 6
  • OOP面向对象编程
  • JavaScript设计模式
前端框架
  • Vue相关

    • Vue基础相关
    • Vue官方生态
    • Vue.js的设计核心
性能优化
  • 前端缓存

    • HTTP缓存
    • 数据缓存
    • 离线缓存
    • CDN缓存
  • 优化方案

    • SEO方向的优化方案
    • Webpack的性能优化
    • Canvas性能优化方案
    • 了解常见的Web、App性能优化方案
    • React、Vue框架使用性能优化方案
前端工程化
  • 部署
  • Git
  • Vite
  • WebPack
第三方拓展
时间线
关于
GitHub

各大站通用首页变灰代码

vuePress-theme-reco 晨曦    2021 - 2022

各大站通用首页变灰代码

晨曦 2020-04-04

百度

.qm-activity {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
1
2
3
4
5
6
7
8
9

淘宝,京东

html {
  -webkit-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
1
2
3
4

华为

body {
  filter: gray;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  overflow-x: hidden;
}
1
2
3
4
5
6
7
8
9
10

知乎

.gray-mode {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(1);
}
1
2
3
4
5

网易

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  _filter: none;
}
1
2
3
4
5
6
7
8

网易云音乐

html {
  /*兼容FF*/
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /*兼容IE内核*/
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /*兼容其它,谷歌之类的*/
  -webkit-filter: grayscale(1);
}
1
2
3
4
5
6
7
8

360首页

html {
  filter: progid:DXImageTransForm.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: saturate(0);
}
1
2
3
4

腾讯网

.garyBody {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
}
1
2
3
4
5
6
7
8

掘金

html.mourning {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: #808080;
}
1
2
3
4
5
6
7
8

CSDN

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
1
2
3
4
5
6
7
8

中国中央政府

/* 版块颜色变黑 */
.header_right,.nav,.rfmfoot,.column3 *{
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
1
2
3
4
5
6
7
8
9
10
11

国务院新闻办公室

div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,table,th,td,img,b,i,em{
  filter: grayscale(100%);/*火狐*/
  -webkit-filter:grayscale(100%);/*chrome*/
  filter: gray;
}
1
2
3
4
5
编辑