让页面整体变灰

小咪咪 2023-09-23 17:38 120阅读 0赞

### 一、写一套灰色的代码 ###

如果不嫌麻烦的话，可以写一套彩色的代码和一套灰色的代码，这样不仅可以实现功能还可以体现工作很忙，实现自己的人生价值。

### 二、通过css控制 ###

如果你和我一样，也是一个懒散的程序员，能一行代码解决的问题，绝不多写一行，我推荐你使用这个方法。众所周知，拍照有滤镜，css也有，下面请今天的主角隆重登场。

![format_png][]

`filter`，首先`filter`属性定义了元素(通常是`<img>`，其他标签也可以)的可视效果(例如：模糊与饱和度)。今天就说一下如何修改所有元素的颜色为黑白 (100% 灰度)。

主要代码实现如下：

.gray {
      -webkit-filter: grayscale(1);
      -moz-filter: grayscale(1);
      -ms-filter: grayscale(1);
      -o-filter: grayscale(1);
      filter: grayscale(1);
      -webkit-filter: gray;
      filter: gray;
      -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
      filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    }
    复制代码

> **浏览器支持**
> 
> 表格中的数字表示支持该方法的第一个浏览器的版本号

![format_png 1][]

[format_png]: https://img-blog.csdnimg.cn/img_convert/d1e2c94887cebc35210818d7e00cdde1.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/ed42ae6d3b91b09c538d5552638bbcde.webp?x-oss-process=image/format,png

发表评论取消回复

表情：

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

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

相关阅读

相关页面变灰操作

<html lang="en"style=" -webkit-filter: grayscale(100%); -moz-filter: graysca

不念不忘少年蓝@/ 2023年10月04日 20:14/ 0 赞/ 24 阅读

相关网页变灰方法

网页变灰方法 <style type="text/css"> html { filter:grayscale(100%); -webk

太过爱你忘了你带给我的痛/ 2023年09月26日 17:09/ 0 赞/ 77 阅读

相关让页面整体变灰

一、写一套灰色的代码如果不嫌麻烦的话，可以写一套彩色的代码和一套灰色的代码，这样不仅可以实现功能还可以体现工作很忙，实现自己的人生价值。二、通过css控制如

小咪咪/ 2023年09月23日 17:38/ 0 赞/ 121 阅读

相关网页是怎么变灰的？

这两天发现网页都变灰了 ![b站主页][b] ![csdn主页][csdn] ![百度主页][2d45a71ef29546b49ff0fee5fefa31e4.pn

刺骨的言语ヽ痛彻心扉/ 2023年09月23日 17:32/ 0 赞/ 65 阅读

相关干货：一段css让全站变灰

想到以往默哀日访问网站时发现整站会变成全灰，即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力，那会不会有css可以直接处理所有的元素将他们变灰，随即想到了css

雨点打透心脏的1/2处/ 2022年12月20日 11:30/ 0 赞/ 138 阅读

相关如何让网站快速变灰

利用css滤镜，可使网站快速变灰，实现代码如下： html { 　　filter: grayscale(100%); 　　-webkit-filte

小咪咪/ 2022年12月03日 09:54/ 0 赞/ 222 阅读

相关 ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式 ![f21b912fc8186a336155ef0cda655160.png][]

左手的ㄟ右手/ 2022年11月04日 13:27/ 0 赞/ 452 阅读

相关 bitmap变灰

`public static final Bitmap grey(Bitmap bitmap) {` ` ` `int width = bitmap.getWid

阳光穿透心脏的1/2处/ 2022年08月07日 03:37/ 0 赞/ 214 阅读

相关 IDEA 导入子项目失效，颜色变灰

看了下Maven Projects ，发现没有该模块选中你的模块，父级，点击Open Moudule Settings 或F4 ![watermark_type_ZmFu

梦里梦外;/ 2022年03月16日 01:46/ 0 赞/ 334 阅读

相关 CSS之纪念日主题网页变灰

> 你好，我是Vam的金豆之路，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：前端开发。我的微信是 maomin9761，有什么疑问可以加我哦，自己创建了一

小灰灰/ 2021年08月27日 19:48/ 0 赞/ 406 阅读