网站全站变成灰色实现方式参考

冷月寒雪

已于 2023-03-27 13:32:49 修改

阅读量438

点赞数

文章标签： css 前端

于 2022-12-03 17:31:22 首次发布

本文链接：https://blog.csdn.net/goGoing_/article/details/128163867

版权

1.前言

近几日，大部分的网站的内容都变成了灰色，包括按钮、图片等等。为了纪念伟人。
在前两天临近下班的时候，接到通知，手中负责的项目门户网要变成灰色，因为我们做的都和ZF相关，以前没有经历过，原以为全部置成灰色需要UI参与设计全部的图片颜色及按钮等。实现的方式却十分简单，特此记录一下。可在百度搜索如下的地址，是我的实现效果，提供参考。

在这里插入图片描述
https://www.nmgzx.gov.cn/webpage/homepage/index.html[参考地址]

2.实现方式

方法一:

<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;差不多，只是写法不同罢了。

方法二：


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

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

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

我使用的是body，html 也是一个意义。实现效果：

/** powerd by zym **/
0 error(s),0 warning(s)

冷月寒雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫