如何实现网站首页变为黑白色？

某些时候，网站会根据要求将页面调成黑白色，一开始我还以为是将连夜把图片和文字都搞成黑白色，但是转念一想，像推送产品的京东、淘宝，以及展示up内容的B站、CSDN等，刷新之后可能展示的内容均不同，作为一个前端程序猿，瞬间引起了我的好奇，那么他们是如何做到的呢？

首先看一下CSDN?

看了下CSDN页面的源代码，发现有如下样式设置：

 html {-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*opera*/filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}body{filter:gray; /*ie9- */background : none!important;}

查阅了下MDN上关于css的filter属性，

filter属性可以将模糊或颜色偏移等图形效果应用于元素，可以用于调整图像、背景和边框样式；

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

其中grayscale函数就被用来改变图像灰度，参数值可以是0-100%或0-1，值为1或100%表示完全转换为灰度图像；若未设置值，默认为0

filter: grayscale(50%); // 将灰度值设置为50%

看来CSDN程序员们是将灰度值调成了100%，从而实现了完全黑白的效果；

再来看一下B站？

查看源代码发现，B站的根元素上定义了gray类，也定义了样式filter属性的grayscale灰度值为0.85：

将灰度值改掉后，发现轮播图还是黑白色，点击轮播图图片发现是把这四张轮播图换成了黑白色图片进行展播；

再来看看淘宝和京东？

也是简单粗暴的直接定义了100%的灰度值（对于轮播图的处理没做特殊处理）；

京东也是同样的处理：

通过以上各大网页的展示，我们可以得出结论，通过设置

filter: grayscale()

可以将首页变为黑白色，而不用费劲的将每个元素一一修改成黑白色~

补充下filter属性的其它用途：

filter: blur(20px); // 为图像设置高斯模糊，默认为0，值越大越模糊

filter: brightness(2); // 为图像设置线性乘法器，使其明亮，默认1，值为0表示全黑，值大于1提供更明亮的效果

filter: contrast(200%); // 设置图像的对比度，默认是1，值为0表示全黑，值超过100%表示更低的对比

filter: drop-shadow(offset-x offset-y blur-radius color); // 前两个参数必选

filter: drop-shadow(16px 16px 20px yellow); // 为图像设置阴影效果，设置值与box-shadow属性相似

filter: hue-rotate(90deg); // 为图像设置色相旋转，默认为0deg，超过360deg默认绕一圈回到初始；

filter: invert(1); // 反转图像，默认为0，值为100%表示完全反转

filter: opacity(25%); // 设置图像的透明程度，默认为1，值为0表示完全透明

filter: saturate(30%); // 设置图像饱和度，默认为1，值为0表示完全不饱和，超过1表示更高的饱和度

filter: sepia(100%); // 将图片转换为棕褐色，默认为0，为1表示完全是深褐色

当然也可以使用任意的组合完成想要的效果：

filter: contrast(175%) brightness(103%) // 设置图片的对比度为1.75、明亮度设置为1.03

如何实现网站首页变为黑白色？相关推荐

网页黑白代码将整个网站变为黑白色怎么弄
网页黑白代码将整个网站变为黑白色怎么弄呢,主要有三种方法,将整个网页设为黑白色代码.将整个网页在一个时间设为黑白色代码和将整个网站在一个时间段设为黑白色代码. 1.将整个网页设为黑白色代码如下: &l ...
Unity中利用shader将贴图变为黑白色
使用Shader直接将贴图变为黑白色 Unity游戏开发中,有时候需要将贴图变为黑白色,以标记为两种状态,大部分时候都是美术做出两张图,一张彩色的一张黑白的,然后来回替换,最近为了省贴图资源,于是在网 ...
哀悼日---将网站变为黑白色的方法
建议javaeye将网站也改为黑白色最简单的把页面变成灰色的代码是在head 之间加 <style type="text/css"> html { FILTER: g ...
默哀日、灾难日，纪念日，哀悼日等网站都变成黑白色
4月4日是全国的哀悼日,网站需要临时处理,变成黑白色.怎么才能快速的将网站变成黑白色呢? <body style="-webkit-filter: grayscale(100%);&q ...
网站一键修改黑白色方法（附代码）
为表达对抗新冠状疫情战斗牺牲烈士和逝世同胞的深切哀悼, 国务院公告2020年4月4日将举行全国性哀悼活动, 网站要求黑白色, 下面给宇哥给大家分享: 如何放一次性代码,让全站变成黑白色效果如图把下 ...
网站设置为黑白色的方法
第一种:修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰.(如果是小白站长们,可以把这段代码和到百度统计放在一起,放之前一定要记得换行隔开) CSS代 ...
网站改成黑白色（兼容大部分浏览器）
有很多时候我们的网站要改成黑白色的.如果说我们必图片有点夸张,如果说用JS效率会与HTML标签的多少直接影响.最好的办法就是用CSS.但是这个功能大家都不常用.我前段时间有这么一个需求.找了好久才找到 ...
php如何让网页变黑白,网站改成黑白色（兼容大部分浏览器）
有很多时候我们的网站要改成黑白色的.如果说我们必图片有点夸张,如果说用JS效率会与HTML标签的多少直接影响.最好的办法就是用CSS.但是这个功能大家都不常用.我前段时间有这么一个需求.找了好久才找到 ...
dede网站首页被黑攻击植入恶意跳转代码怎么办? 首页经常被篡改标题关键字的解决方法
网站title被加入代码: 首先,我们要先修复首页代码,解决跳转问题,避免更多用户跳转到恶意页面,也是避免网站被篡改后的tdk被搜索引擎收录! 然后我们先解决对方通过自定义宏标记和智能标记向导来篡改首 ...