HTML网页一键变黑白色调

秒速五厘米 2023-07-24 02:36 70阅读 0赞

**我们的网站有时可能需要实现全站黑白色调功能(一般常用于悼念日) ，如何快速地实现一键黑白色调效果，我们需要了解 CSS 的 filter(滤镜) 属性**

关于 CSS 中 filter 的解释：

https://www.runoob.com/cssref/css3-pr-filter.html

*  1、简单使用

html { 
    	filter: grayscale(100%);
    }

*  2、兼容性使用

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);
    }

*  3、实现效果

![网页黑白效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]  
如您在阅读中发现不足，欢迎留言！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]: /images/20230528/e59084d4b13d49d7926d728b00f4464d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 ps彩色照片变黑白照片

ps彩色照片变黑白照片最佳答案: 选择图像菜单模式灰度模式这样就可以了记得另存一个

刺骨的言语ヽ痛彻心扉/ 2024年02月17日 20:00/ 0 赞/ 168 阅读

相关全网黑白、灰色网页变回正常彩色方法

大伙都知道。每当一到一些特定的日子，全网上下包括APP，一片死灰。所有的网页几乎都没有了任何色彩，让大家心情极度压抑。我反正有这种感觉。感觉无法呼吸一样。。浏览起来心情特别沮丧

怼烎@/ 2023年10月04日 20:14/ 0 赞/ 205 阅读

相关一文读懂如何让网页变灰白色(黑白色)

文章目录 1. 文章引言 2. 实现方法 2.1 修改CSS文件 2.2 修改html标签 2.3 修改body标签

男娘i/ 2023年09月25日 13:56/ 0 赞/ 147 阅读

相关 HTML网页一键变黑白色调

我们的网站有时可能需要实现全站黑白色调功能(一般常用于悼念日) ，如何快速地实现一键黑白色调效果，我们需要了解 CSS 的 filter(滤镜) 属性关于 CSS 中 fi

秒速五厘米/ 2023年07月24日 02:36/ 0 赞/ 71 阅读

相关 html div变黑色,hbuilder代码变黑了

Hbuilder代码格式化问题打开HBuilder点击工具打开选项打开选项以后点击HBuilder，点击整理格式化设置默认配置不可更改，首先要先复制一份在修改点击修改

妖狐艹你老母/ 2022年10月06日 13:48/ 0 赞/ 303 阅读

相关静态变动态HTML,动态网页变静态：JSP生成静态HTML技术

![c4468b3f4df77e96b0a416fa2a870fba.png][] 下面的一段代码是，使用jsp生成静态html //在这里如果写成“WEB-INF\\te

怼烎@/ 2022年10月06日 11:44/ 0 赞/ 360 阅读

相关 html一键使网页字体变大,网页字体变大了怎么办

网页字体变大了导致重叠怎么办？不是缩放的原因我的电脑网页字体变大了怎么办按住CTRL在滚动鼠标滚轮。。。或者在网页右下角有个调整的，，百分之多少的、。或者CTRL+ 或

电玩女神/ 2022年10月06日 07:51/ 0 赞/ 373 阅读

相关京东黑号了怎么变白（目前相对有效的洗白方法）

黑号更多的表现在不能正常领取优惠券，各种抽奖不中，要填写验证码的特惠商品抢购不到，这个都是由系统自动判定帐号限制！也就是限制不到京东的很多优惠政策了！对购买商品正常的退换货

小咪咪/ 2022年09月10日 06:18/ 0 赞/ 267 阅读

相关透明变白

ffmpeg -i in.png -vf format=yuva444p,geq='if(lte(alpha(X,Y),16),255,p(X,Y))':'if(lte

怼烎@/ 2022年04月11日 09:45/ 0 赞/ 288 阅读

相关小白入门之前端网页技术HTML

文章目录前端技术：学习方法前端要怎么学？前端技术栈 HBuilderX

╰+攻爆jí腚メ/ 2021年07月16日 12:50/ 0 赞/ 639 阅读