网页全局设置黑白色（含图片、视频）

使用CSS特性可设置网站全局黑白色显示。

可对网页中的文字、图片、控件、视频（全屏后为彩色）进行灰度处理。

在网站跟页面添加对应CSS代码即可，该段代码在网页上添加过滤器，对整个网站一个这层。

具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>网页黑白色示例</title>
    </head>
    <body>
        <div style="height: 100px;width: 200px; background-color: #00f7ff;">dsd</div>
        <video autoplay="" controls="" style="width: 800px;" >
            <source src="src/testVideo.mp4" type="video/mp4">
        </video>
        <img style="height: 900px;width: 800px;" src="src/image.png"/>
    </body>
    <style>
        html {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        }
        </style>
</html>>

效果图如下：

posted @   张冠胜  阅读(430)  评论(0)  编辑  收藏  举报
相关博文：
·  centos系统给centos-root硬盘扩容
·  安装Hadoop单节点伪分布式集群
·  用CSS将整个网站变成黑白色调的方法
·  [CSS]网页内容黑白展示
·  将整个网站（包括子页）变为黑白色
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
历史上的今天：
2013-12-01 ASP.NET MVC4 学习笔记-4
点击右上角即可分享
微信分享提示
SQL AI 助手