每逢清明或者哀悼日,很多站长为怀念先人或事迹就想把网站整体变灰色,很多小白站长却不知道怎么做。

网站整体如何一键变灰?CSS实现网站一键变灰?-Qui-Note

其实网站整体变灰的原理很简单:通过滤镜filter将图片、文字以及图标等网站所有可见元素全部黑白,去掉颜色

以下就是CSS实现网站整体一键变灰色的代码:

html{
filter: grayscale(100%); -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%); -ms-filter: grayscale(100%);
-o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}

两种使用方法:

1.将代码扔到全局css样式的最后一行!!!
2.用<style>上面代码</style>放到网站head代码里面也可以生效

这样的话,你的网站也可以实现整体变灰效果了,简单的css就能实现这样的功能,是不是被css滤镜震撼到了,其实filter滤镜还有很多效果,例如:图片背景模糊,颜色叠加消融,都需要前端慢慢学习,去总结!