CSS代码加滤镜将网站变为灰色/怎么把网站变为灰色

一、效果图

二、CSS代码

html{
background-color: rgb(238, 242, 245);
background-blend-mode: luminosity;
/*上面两行代码将有彩色背景图片的也调为灰色*/
filter: grayscale(95%);
-webkit-filter: grayscale(95%);
-moz-filter: grayscale(95%);
-ms-filter: grayscale(95%);
-o-filter: grayscale(95%);
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: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.95);
}

CSS代码加滤镜将网站变为灰色(完整版)/怎么把网站变为灰色(完整版)的更多相关文章

  1. CssStats – 分析和优化网站 CSS 代码的利器

    CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...

  2. 转载网易博客:整理各大网站让网站变灰的css代码

    2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部 ...

  3. 各大网站CSS代码初始化集合

    css代码之所以初始化,是因为能尽量减少 各浏览器之间的兼容性问题! 腾讯QQ官网 样式初始化 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fiel ...

  4. (转)每位设计师都应该拥有的50个CSS代码片段

    原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...

  5. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

  6. 20 个让你效率更高的 CSS 代码技巧

    在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...

  7. 实用的60个CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  8. 20个编写现代 CSS 代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  9. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  10. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

随机推荐

  1. IdentityServer4的最佳使用

    简介   本人做微服务项目也有一段时间了,在微服务中让我感触颇深的就是这个IdentityServer4了,ID4(IdentityServer4的简称)中涉及的概念颇多,本文不谈概念(我怕读者没耐心 ...

  2. ORM执行sql语句 双下划线 外键字段创建 ORM跨表查询

    目录 模型层之ORM执行SQL语句 方式1一 方式二 方式三 神奇的双下划线查询 ORM外键字段的创建 1.创建基础表 2.确定外键关系 3.表的查看 数据的录入 外键字段相关操作 针对一对多 ''' ...

  3. webpack 中 loader 和 plugin 的区别

    通俗点讲loader是转换,plugin是执行比转换更复杂的任务,比如合并压缩等 loader:让webpack能够处理非js文件,然后你就可以利用 webpack 的打包能力,对它们进行处理. 例如 ...

  4. KEIL5、STM32CubeMX、STM32CubeIDE 下载、安装

    一.资源下载 Keil5下载链接: https://www.keil.com/download/product/ STM32 标准库芯片包下载链接: https://www.keil.com/dd2/ ...

  5. springcloud-gateway整合jwt+jcasbin实现权限控制

    jcasbin简介: jcasbin 是一个用 Java 语言打造的轻量级开源访问控制框架https://github.com/casbin/jcasbin,是casbin的Java语言版本.目前在 ...

  6. c++ 递推算法

    各位大佬不妨先点个赞再看文章! 递推法是一种重要的数学方法,在数学的各个领域中都有广泛的运用,也是计算机用于数值计算的一个重要算法.这种算法特点是:一个问题的求解需一系列的计算,在已知条件和所求问题之 ...

  7. 平台工程101:Dev、Sec和Ops的自动化黏合剂

    国际权威知名调研机构 Gartner 在<2023年最重要的10个技术趋势>报告中将平台工程(Platform Engineering)列为高速发展的技术趋势之一,并预测到2026年80% ...

  8. 编程哲学之 C# 篇:003——为什么选择 C#

    国内开设C#课程的学校或培训机构是越来越少,使用C#作为开发的语言企业也是越来越少.企业要招C#的开发人员越来越难,会C#的要开发人员要找工作也是越来越难,然后我还是选择C#作为本系列的主要语言,我给 ...

  9. python正则分组匹配

    import re s = ''' {"type":"buy","order_no":"202006161314138669164 ...

  10. 洛谷p2669

    #include<bits/stdc++.h> using namespace std; int main() { int k,m=0,p=1;//p:给j个金币的第p天(1~j循环变化) ...