如何让整个网页变灰

2022-11-18 墨初 Web前端 682阅读

在一些特殊的节日里，为了表示哀悼，很多网站的站长们都会将网页的颜色变成黑白色。下面就提供了几种将网站网页变成灰色的方法，可以选择合适的使用！

让整个网站变成灰色的做法

方法一：修改网站的CSS文件

在网站的CSS样式代码的文件中加入下面的代码即可！下面给出了两段代码，取怎么喜欢的一段就可以。

代码段1：

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

代码段2：

body *{
    -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; /*ie9- */
}

方法二：在网页的<head>标签内加入代码

在网页的 <head></head> 标签之间加入以下CSS样式代码也可以实现网页变灰的效果！

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

方法三：在 <html> 标签内加入CSS样式

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

标签：HTML CSS