Web网站都变成灰色有哪些方法可以快速实现(解决方案)

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

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

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

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

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

方法一:

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

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

方法二：

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

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

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

<!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">

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

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最后

给出一段规范的代码，把这段代码加入到网站页面的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,<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)
}

到此这篇关于网站都变成灰色有哪些方法可以快速实现的文章就介绍到这了,更多相关网站变成灰色内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 全国哀悼日网站页面变成灰色的filter方法

    为方便站点哀悼,特提供css滤镜代码,以表哀悼.以下为全站CSS代码. 直接在*.css文件最前面加入 body{ filter:Gray; } 或者 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 均可 其他HTML页面 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 如果是纯HTM页面的可以

  • VS2010发布Web网站技术攻略

    VS2010发布Web网站技术攻略

    VS2010 Web网站发布详解 对VS2010来说,发布Web是一件相当容易的事情,也许就是这个原因导致网上关于发布网站具体细节的资料很少.然而这些正是初学者所需要的,下面我详细介绍一下Web网站发布的具体过程. 第一步:在解决方案资源管理器中右击Web应用程序名(例如:newsSystem)-->点击发布,如图所示: 第二步:在弹出的对话框中,发布方法选:文件系统,目标位置自定义(如:选桌面的test文件夹),勾选"发布前删除所有现有文件"单选框,然后点击发布即可.如图: 补

  • 深入了解 register_globals (附register_globals=off 网站打不开的解决方法)

    深入了解 register_globals dedecms 里强制限制了register_globals 由于register_globals设置控制PHP变量访问范围,如果开启会引起不必要的安全问题,所以这里对其进行了强制关闭,如果站长的空间不支持,可以采用以下几种办法进行修改,供广大站长参考: *如果是独立服务器的用户可以修改php配置文件中的php.ini,将register_globals=On改为register_globals=Off,然后重启Apache. *如果是虚拟主机的用户,

  • web前端页面生成exe可执行文件的方法

    在 HTML5的崛起.JavaScript要一统天下之际,有一个名为[跨平台]的技术越来越火.为什么会这么火?因为软件开发者只需一次编写程序,即可在 Windows.Linux.Mac.IOS.Android 等平台运行,大大降低了程序员的工作量,也使公司的产品可以快读迭代.曾经跨平台技术的不被看好,如今随着手机.电脑硬件的发展而快速发展.这一切,几乎由HTML5技术推动,当然,JavaScript 这个语言,是最大的功臣. 基于 HTML5 的跨平台技术比较出名的有 PhoneGap.Cord

  • .NET CPU爆高事故事故分析某供应链WEB网站

    .NET CPU爆高事故事故分析某供应链WEB网站

    目录 一:背景 1. 讲故事 二:Windbg 分析 1. 查看CPU占用率 2. 查看是否 GC 触发 3. 是插入数据过多导致的吗? 4. 对问题的预判断 三:总结 一:背景 1. 讲故事 年前有位朋友加微信求助,说他的程序出现了偶发性CPU爆高,寻求如何解决,截图如下: 我建议朋友用 procdump 在 cpu 高的时候连抓两个dump,这样分析起来比较稳健,朋友也如期的成功抓到,接下来就用 windbg 一起来分析下吧. 二:Windbg 分析 1. 查看CPU占用率 先用 !tp 查

  • ASP.NET实现Web网站本地化

    ASP.NET实现Web网站本地化

    1.重写InitializeCulture方法. 在Global.asax中的Application_BeginRequest获取或设置语言,每次页面的请求都首先运行这个方法,然后再运行具体页面的InitializeCulture重载方法. 附上一张图,看看页面方法和事件的执行顺序 protected override void InitializeCulture() { String curCulture = Request.QueryString["currentculture"]

  • Web网站安全性存在的五个误解

    目前,黑客攻击已成为一个很严重的网络问题.许多黑客甚至可以突破SSL加密和各种防火墙,攻入Web网站的内部,窃取信息.黑客可以仅凭借浏览器和几个技巧,即套取Web网站的客户信用卡资料和其它保密信息. 随着防火墙和补丁管理已逐渐走向规范化,各类网络设施应该是比以往更完全.但不幸的是,道高一尺,魔高一丈,黑客们已开始直接在应用层面对Web网站下手.要增强Web网站的安全性,首先要澄清五个误解. 一."Web网站使用了SSL加密,所以很安全" 单靠SSL加密无法保障网站的安全.网站启用SSL

  • ASP.NET Web页生命周期和执行的方法介绍

    ASP.NET Web页生命周期和执行的方法介绍

    以上所列的阶段中有些在页面级是不可见的,并且仅对服务器控件的编写者和要创建从 Page 导出的类的开发人员有意义.Init.Load.PreRender.Unload,再加上由嵌入式控件定义的所有回发事件,就构成了向外发送页面的各个阶段标记. 执行的各个阶段 页面生命周期中的第一个阶段是初始化.这个阶段的标志是 Init 事件.在成功创建页面的控件树后,将对应用程序触发此事件.换句话说,当 Init 事件发生时,.aspx 源文件中静态声明的所有控件都已实例化并采用各自的默认值.控件可以截取 I

  • Winform客户端向web地址传参接收参数的方法

    在web端定义js方法去接收客户端传递过来的参数,具体就是获取地址中?后的数据,各个参数用&分割,存储于数组中,获取. 具体如下: //定义获取地址中参数的方法 function GetRequest() { var url = location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("

  • 如何获取网站icon有哪些可行的方法

    获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用. 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favicons?domain=http://www.baidu.com 代码: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="

随机推荐