网站整体变灰

公程狮

已于 2024-09-09 11:36:24 修改

阅读量40

点赞数

分类专栏： html 文章标签： html

于 2023-11-02 17:44:28 首次发布

本文链接：https://blog.csdn.net/yhl20202020/article/details/134187943

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML中使用CSS滤镜实现页面灰度效果，包括filter属性、针对不同浏览器的兼容性处理（如-webkit-filter）以及解决Flash动画颜色不受控制的方法。还提到了网页标准协议对CSS滤镜的影响和使用SVG实现更稳定的灰度效果。

摘要由CSDN通过智能技术生成

方法一：

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

方法二：

有一些网站可能使用这个 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 代码的和之间插入：

方法三：

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