HTML-如何让网站变成灰色？

秦时明月之君临天下

于 2022-12-10 16:47:08 发布

阅读量994

点赞数 3

文章标签： html css firefox

本文链接：https://blog.csdn.net/weixin_41287260/article/details/128264816

版权

HTML 同时被 2 个专栏收录

25 篇文章 4 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

在某些特定的时候，我们经常会看到网站会将整体布局设置成灰色色调，以示哀悼。

那么这是怎么实现的呢？

我去查了下相关的文章，发现是通过CSS的过滤器函数实现的，详见：grayscale()。

grayscale:对图片进行灰度转换

filter: grayscale(0);

不是灰度
在这里插入图片描述

filter: grayscale(60%);

在这里插入图片描述

filter: grayscale(1);

全灰
在这里插入图片描述

至于具体怎么用的话，就是怎么将CSS嵌套进HTML的方式了。

方法1：CSS文件

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

各种浏览器兼容版本

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);
	filter: gray;
}

方法2：HTML的style属性

<style type="text/css">
html {
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(100%);
}
</style>

方法3：HTML的内联样式

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

参考：

秦时明月之君临天下

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录