您的位置：首页 > 编程技术 > js  >  Web网站都变成灰色有哪些方法可以快速实现(解决方案)

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

 更新时间：2022年12月9日 16:11  点击：693 作者：肥肥技术宅

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

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

有人会以为所有的内容都统一换了一个 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)
}

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

原文出处：https://blog.csdn.net/m0_71777195/article/details/128159387

[!--infotagslink--]

相关文章

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

    获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现：http://www.google.com/s2/favi...2014-06-07

  • mac下Apache + MySql + PHP搭建网站开发环境

    首先为什不自己分别搭建Apache，PHP和MySql的环境呢？这样自己可以了解更多知识，说起来也更酷。可也许因为我懒吧，我是那种“既然有现成的，用就是了”的人。君子生非异也，善假于物也。两千年前的荀子就教导我们，要善于利用工具...2014-06-07

  • php实现网站留言板功能

    我要实现的就是下图的这种样式，可参考下面这两个网站的留言板，他们的实现原理都是一样的畅言留言板样式：网易跟帖样式：原理 需要在评论表添加两个主要字段 id 和 pid ，其他字段随意添加，比如文章id、回复时间、回复内容、...2015-11-08

  • 网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例

    网站广告怎么投放最好?一个网站中广告位置最好的是哪几个地方呢，许多的朋友都不知道如何让自己的网站广告收效最好了，今天我们就一起来看看吧。 在说到联盟优化前,...2016-10-10

  • 个人站长做网站应该考虑的一些问题

    个人网站建设应该考虑哪些问题呢？这个问题我们先在这里不说，下文会一一列出来，希望这些建义能帮助到各位同学哦。 我相信VIP成员里面有很多站长，每个人几乎都拥有一个...2016-10-10

  • 分享利用论坛签名提升网站权重

    分享一篇利用论坛签名提升网站权重的方法，在推广中论坛签名也是一种不错的外链推荐的方法，但现在权重越来越低了，有需要的朋友可以看看。 话说有一天在站长网上面看...2016-10-10

  • 网站排名提升后稳定排名方法

    一、靠前排名成搜索关注的对象 　　从搜索引擎的角度考虑一下，就不难理解为什么搜索引擎对排名在首页的网站那么慎重，甚至对新进排名在首页的一些网站进行为期一个多月的...2016-10-10

  • 如何提高网站pv 吸引力

    关于如何提高网站的吸引呢，下面我们列出了5点，让你的网站pv大大的提升哦 　　1、建立一个清晰的网站地图 　　一个清晰的网站地图可以给你的用户提供一个简介明了的...2017-07-06

  • 韩国网站之网站颜色组合搭配

    ...2016-09-20

  • 如何有效提高网站的用户回头率

    第一，网站的内容;请各位站长朋友不要一天到晚只想着出什么好的绝招来推广网站，却忽略了网站的内容;其实网站的内容是极为重要的，因为这是你的本，你的根!网站的内容只有不断...2017-07-06

  • C#网站生成静态页面的实例讲解

    今天小编就为大家分享一篇关于C#网站生成静态页面的实例讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧...2020-06-25

  • 网站改版了怎么办?

    网站改版了怎么办?很多网站在改版的时候，非常担心用户习惯。 　　有的担心是合理的，有的担心是多余的。担心之前，先搞清两个问题： 　　首先，你有没有老用户？有多少老用户？如果...2016-09-20

  • 如何提高网站品牌形象

    这两个网站的title和description部分关键词有点过于强调，决定弱化这种现象成了我的当务之急，以提高网站在搜索引擎里的品牌形象(搜索引擎返回结果就这两部分)。通过分析...2016-10-10

  • 用PHP与XML联手进行网站编程

    一、小序 HTML简单易学又通用，一般的PHP程序就是嵌入在HTML语言之中实现的。但是随着WEB越来越广泛的应用，HTML的弱点也越来越明显了。XML的出现，弥补了这些不足，它提供...2016-11-25

  • 对于网站快速提升排名10种方法分析

    在耽误近一年时间的情况下，痛定思痛，决定自己动手做公司网站的SEO，具体过程如下： 　　1.买了几本专门SEO方面的书本，啃了两个星期，经常上比如www.111cn.net 和seo教程why之类...2016-10-10

  • python 制作网站筛选工具(附源码)

    平常工作生活中，boos可能会给我们很多网站取提取信息，这些网站有的无法响应，有的404，有的501…真的需要所有网站都访问再提取信息吗？今天写一个小工具用于筛选网站中能访问的网站，在此仅举一例，即状态码为200。...2021-01-22

  • 那类网站放Google adsense广告好

    那类网站放Google adsense广告好呢，好了费话不说多了我们来看看Google adsense吧 　1. 增加Google AdSense的展示效果，理论上是页面越多，展示的就越多。但是Google...2017-07-06

  • 百度不更新网站原因分析

    百度不更新网站原因分析 今天我们来看一篇关于 哦，你是不是其它的之一呢，好了下面来看看各位站长总结了来百度不更新网页的原因吧。 一、首页的大flash图片。 　　...2016-10-10

  • 如何提高网站内页权重

    如何提高网站内页权重 前面做站者总结出来的道理其实都是很实惠的，只是你有没有那个恒心去坚持了。所谓的“内容为王，外链为后!”是一点都不假的，一名站长...2017-07-06

  • 提高网站转化率

    在线预订系统即便存在一点点小错误，也可以导致有价值客户的流失。Jones在其主题为“别让我想，也别让我等”的演讲中，强调客户满意度必然可以换来客户忠诚度。...2016-10-10