下面整理了几种让网页变灰色的CSS代码，供各位站长参考！

方法1：支持IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<style>

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

</style>

说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。

方法2：支持IE

body {filter:gray}

说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。

提示：虽然这个方法代码量最小，但是效果却不好，而且网页也比较卡。

方法3：同时支持IE和Chrome

<style>

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

</style>

说明：此方法支持IE浏览器、Safari和Chrome等浏览器，但是不支持Firefox浏览器。

方法4：使用grayscale.js插件

使用grayscale.js插件。这个插件是模拟IE的filter:progid方，官网地址在：

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

使用方法：

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/javascript"></script>

<script type="text/javascript">

window.οnlοad=function(){

grayscale(document.body);

}

</script>

说明：支持IE、Safari、Chrome、Opera和Firefox等浏览器。

问题：这个在IE下也挺占资源的。

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,<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=1);

-webkit-filter: grayscale(1);

}

建议：使用方法3，虽然不支持更多的浏览器，但是稳定、速度快，而且资源占用小。

下面整理了几种让网页变灰色的CSS代码，供各位站长参考！相关推荐

整个网页变黑白的CSS代码
1 . 网页黑白代码内部样式 , 写入html标签 <html style="filter: progid:DXImageTransform.Microsoft.BasicImage( ...
html谷歌兼容代码,让网站变灰的css代码（支持IE、Firefox和Chrome）
四川雅安芦山发生7.0级别大地震,不少网站首页已经变成了灰色表示哀悼.下面笔者整理了几种让网页变灰色的CSS代码,供各位站长参考! 方法1:支持IE html{filter:progid:DXImag ...
php代码显示灰色,哀悼日-实现网页变灰色的方法
哀悼日期间经常需要把网页设置为灰色状态,现总结一下方法以备后用,在网站的CSS文件中的顶部加入如下代码: html{filter:progid:DXImageTransform.Microsoft.B ...
最新ie图标变灰css,网站变灰的CSS代码（兼容火狐、Chrome、IE系浏览器）——w3cdream|前端学习-开发...
之前找了一些代码在火狐下无效,于是百度谷歌一起上,终于被我找到了支持火狐.谷歌等浏览器的把网页变黑白代码: /* 网站黑白代码 */ html{ filter: grayscale(100%); -w ...
前端网页开发常用兼容css代码
前端网页开发常用兼容css代码 /* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt ...
html页面变成黑白,修改CSS样式实现网页变灰色/黑白代码的几个方法整理
今天上午有网友提到希望将网站整体的色调换成灰色.黑色色调,这个记得在以前纪念一些日子的时候会有用到,早年老蒋在自己的博客中也有使用的.记得那时候直接是修改CSS就可以实现,既然有用户需要,老蒋这里抽点 ...
修改CSS样式实现网页变灰色/黑白代码的几个方法整理
今天上午有网友提到希望将网站整体的色调换成灰色.黑色色调,这个记得在以前纪念一些日子的时候会有用到.记得那时候直接是修改CSS就可以实现,既然有用户需要,这里抽点时间再整理一下看看是否有其他更好的方法 ...
html 如何让网页变灰色
只在网页中加入这个样式就可以了,大家可以拿去试试应用场景一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色 ...
网页变灰色前端是如何实现的？
本文转载转自bilibili最爱up主–黑马程序员pink老师今天是4.4疫情哀悼日,纪念疫情期间牺牲的烈士和逝世同胞,因此大部分网站颜色都变灰色了,我们前端是如何实现的呢? 核心原理,使用cs ...

下面整理了几种让网页变灰色的CSS代码，供各位站长参考！

下面整理了几种让网页变灰色的CSS代码，供各位站长参考！相关推荐

最新文章

热门文章