为什么网页页面是灰色的（为什么浏览器页面变成灰色的了）

来源：
   blog.csdn.net/YOUYOU0710/article/details/105350655

有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日的时候，都会让网站的全部网页变成灰色（黑白色），以表示我们对逝者或者英雄的缅怀和悼念。

当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？

有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实，解决方案很简单，只需要几行代码就能搞定了。通过参考资料，我总结出以下几个方法可以帮助我们达到目的：

使这个网页的颜色变成灰色的最简单的方法，就是在当前页面的css里面。添加下面的代码，并且让他在任意的浏览器里面正确的执行：

方法一:


filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的，意思和FILTER: gray;差不多，只是写法不同罢了。

方法二：

下面这段代码可以把网页变为黑白，将代码加到 CSS 最顶端就可以实现素装，如果网站没有使用 CSS，可以在网页/模板的 HTML 代码和 之间插入：


有一些网站可能使用这个 css 不能生效，是因为网站没有使用最新的网页标准协议，请将网页最头部的替换为以下代码：



还有一些网站 FLASH 动画的颜色不能被 CSS 滤镜控制，可以在 FLASH 代码的和之间插入：



最后

给出一段规范的代码，把这段代码加入到网站页面的css里面即可实现页面变成灰色的效果：

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

相关推荐

  • 浏览器网页缩放比例怎么调 如何让所有页面生效

    在平时上网浏览网页的时候,对于视力不太好的朋友来说,页面上的文字可能看起来感觉有些吃力,这时可以考虑放大网页上的文字,但往往只是放大打开的页面,怎么样让所有的网页都能够自动放大呢?下面就以搜狗浏览器为 ...

  • xp系统浏览器页面上的链接打不开是怎么回事

    xp系统浏览器页面上的链接打不开是怎么回事?近来,很多中关村xp系统用户在使用浏览器浏览点击网页时,都遇到了一些故障问题.他们反馈能打开网页但是网页上的链接怎么也打不开,显示的是空白网页,这该怎么办呢 ...

  • 搜狗浏览器网页打不开怎么办 搜狗浏览器无法上网的解决方法

    搜狗高速浏览器由搜狗公司开发,基于谷歌chromium内核,力求为用户提供跨终端无缝使用体验,让上网更简单.网页阅读更流畅的浏览器,不过有部分用户在使用的时候会出现打不开网页,下面我们小编带来了搜狗浏 ...

  • 利用chrome自带工具限制浏览器页面浏览、下载速度的方法介绍

    如何限制Chrome浏览器页面浏览.下载速度?相比平时大家都是用尽各种发自来提高网速,好让下载.抢购.浏览网页时有更好的体验.但对于开发者来说,有时候需要在特定网速或者网络较差的情况下进行一些调试.那 ...

  • Mac苹果电脑的浏览器页面如何放大缩小

    Mac苹果电脑的浏览器页面如何放大缩小

    我们有的时候因为Mac浏览器页面太小而想要放大,有的时候觉因为太大而想要放小,那么Mac的浏览器页面如何放大缩小呢?小编就以Safari来为大家介绍一下吧.具体如下:1. 第一步,点击并打开safar ...

  • 苹果MAC电脑怎么同时打开很多个浏览器页面

    苹果MAC电脑怎么同时打开很多个浏览器页面

    相信我们在使用浏览器的时候,可能会需要同时使用很多个页面,今天小编就告诉大家苹果MAC电脑怎么同时打开很多个浏览器页面.具体如下:1. 属性我们打开自己 MAC电脑,进入桌面之后我们点击左侧一栏中la ...

  • 浏览器页面卡死，鼠标动不了怎么办？

    平时我们在用电脑的时候会发现有时候电脑突然死机了,或者我们在用浏览器浏览页面的时候突然卡死,鼠标也动不了了,那么网页突然卡死要怎么办呢? 操作方法 01 第一:我们可以看到在突然卡死的页面鼠标也动不了 ...

  • 如何调整搜狗浏览器页面字体大小

    今天小编要和大家分享的是如何调整搜狗浏览器页面字体大小,希望能够帮助到大家. 操作方法 01 首先在我们的手机桌面上找到搜狗浏览器并点击它,如下图所示. 02 然后点击屏幕左下方的三条横杆,如下图所示 ...

  • 为什么火狐浏览器页面字体不一样

    我们首先打开Firefox菜单，依次点击选项—选项。 在选项中切换到"内容"，点击"字体和颜色"中的"高级"按钮。 然后将"允许页面选择显示字体二无需使用上面的设置"选项取消勾选，然后确定退出即可解决 ...

  • 火狐浏览器页面会显示错乱原因和解决方法

    　其实出现这些问题主要是由于火狐缓存混乱造成的，而造成缓存错乱的原因就是用了第三方工具清理了火狐的缓存。在这里我们需要按下Ctrl + Shift + Del (Mac系统下 command+shif ...