将整个网站变为黑白色

深藏阁楼爱情的钟 2023-09-27 13:01 12阅读 0赞

**目录**

效果：

代码：

兼容性写法：

原理：

--------------------

#### 效果： ####

ps：实测淘宝也是用的这种方式，有兴趣可以去看看

![e608c6e87e004c80a743ff280286e9f2.png][]

--------------------

#### 代码： ####

> 使用方式就是找到根标签，将里面的两行代码放进去即可

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

--------------------

#### 兼容性写法： ####

上面的方式基本够用，常见的浏览器经测试没问题，实际上这个方法已经实际使用很多年了。

html {
        -webkit-filter: grayscale(100%); //chrome、safari浏览器
        -moz-filter: grayscale(100%);//firefox浏览器
        -ms-filter: grayscale(100%);  //IE浏览器
        -o-filter: grayscale(100%); //Opera浏览器
        filter: grayscale(100%); 
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
       }

--------------------

#### 原理： ####

> [grayscale() - CSS（层叠样式表） | MDN][grayscale_ - CSS_ _ MDN]
> 
> 可以点击上面的链接去详细了解。大体意思是，这个方法是对图片进行灰度转换，使用方式：
> 
>     grayscale(0)     /* 无效果 */
>     grayscale(.7)    /* 70% 灰度 */
>     grayscale(100%)  /* 灰度最大 */
>     完整写法：filter: grayscale(0.20);//20%灰度

[e608c6e87e004c80a743ff280286e9f2.png]: https://img-blog.csdnimg.cn/e608c6e87e004c80a743ff280286e9f2.png
[grayscale_ - CSS_ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale#%E4%BE%8B%E5%AD%90

发表评论取消回复

表情：

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

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

相关阅读

相关将网站从http变为https的步骤

将网站从HTTP变为HTTPS的步骤如下： 1. 购买SSL证书：首先，您需要购买SSL证书。您可以从SSL证书提供商处购买，例如Comodo、Symantec或DigiC

蔚落/ 2024年03月25日 18:41/ 0 赞/ 107 阅读

相关如何让网站变成黑白色或者灰色？

怎么将网站整体色调变黑白灰色？一般很庄重的事情或者影响力很大的伟人逝世、纪念日的时候，站长会把网站全部网页设置为灰色或者黑白色，以表示对逝者的悼念，本篇整理了四种可以实现网页变

梦里梦外;/ 2023年10月04日 21:08/ 0 赞/ 99 阅读

相关将整个网站变为黑白色

目录效果：代码：兼容性写法：原理： -------------------- 效果： ps：实测淘宝也是用的这种方式，有兴趣可以去看看 ![e608

深藏阁楼爱情的钟/ 2023年09月27日 13:01/ 0 赞/ 13 阅读

相关网页黑白代码将整个网站变为黑白色怎么弄

网页黑白代码将整个网站变为黑白色怎么弄呢，主要有三种方法，将整个网页设为黑白色代码、将整个网页在一个时间设为黑白色代码和将整个网站在一个时间段设为黑白色代码。 1.将整个网页

r囧r小猫/ 2023年09月23日 17:11/ 0 赞/ 159 阅读

相关默哀日、灾难日，纪念日，哀悼日等网站都变成黑白色

4月4日是全国的哀悼日，网站需要临时处理，变成黑白色。怎么才能快速的将网站变成黑白色呢？ <body style="-webkit-filter: grayscale

- 日理万妓/ 2023年07月21日 14:29/ 0 赞/ 55 阅读

相关 tolist()将ndarray变为list

前言： > NumPy 最重要的一个特点是其 N 维数组对象 ndarray，它是一系列同类型数据的集合，以 0 下标为开始进行集合中元素的索引。ndarray 对象是用

「爱情、让人受尽委屈。」/ 2023年03月06日 03:20/ 0 赞/ 64 阅读

相关 IDEA代码提示消失，代码全部变为白色（已解决）

今天使用idea时不知道点了什么，重启IDEA后发现代码提示功能消失，页面的彩色字体效果消失。这样就比较难受了，自己一个字符一个字符的敲代码多少是有点不愉快，效率太低，作为一个

川长思鸟来/ 2023年01月20日 12:57/ 0 赞/ 96 阅读

相关 CSS3 filter grayscale 将整个界面变为黑白灰色调

通过外部样式 <link rel="stylesheet" type="text/css" href="myGrayscale.css"> myGrayscal

迷南。/ 2022年07月12日 04:38/ 0 赞/ 217 阅读

相关 AndroidStudio将module变为library

前言 -------------------- 在一个application当中，可能会存在多个module，有时也会有一个module包含其他module的需求。在完

清疚/ 2022年06月01日 05:53/ 0 赞/ 315 阅读

相关 python图像处理图像赋值后变为白色

用Python进行图像赋值，在1RGB基础上，加入光流两个通道，代码如下所示： import numpy as np import cv2 impor

短命女/ 2021年12月03日 14:23/ 0 赞/ 297 阅读