CSS网页变灰色实例汇总

àì夳堔傛蜴生んèń 2023-07-22 09:05 18阅读 0赞

### 文章目录 ###

*   *  CSS网页变灰色实例汇总
     *   *  1.搜狐
         *  2.B站
         *  3.搜狗
         *  4.天猫
         *  5.百度
         *  6.58同城
         *  7.央视网

## CSS网页变灰色实例汇总 ##

### 1.搜狐 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center]  
**代码：**

style="filter: grayscale(1);

### 2.B站 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 1]  
**代码：**

html.gray {
                -webkit-filter:grayscale(.95);
            }

### 3.搜狗 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 2]  
**代码：**

html {
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -o-filter: grayscale(100%);
            }
            *{
                filter: gray;
            }

### 4.天猫 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 3]  
**代码：**

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

### 5.百度 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 4]  
**代码：**

body.qm-activity #head_wrapper,body.qm-activity #u,body.qm-activity #u1,body.qm-activity .s-top-left.s-isindex-wrap {
                filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                filter: grayscale(100%);
                filter: gray
            }

### 6.58同城 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 5]  
**代码：**

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

### 7.央视网 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 6]  
**代码：**

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)
            }
    
            * {
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                filter: gray;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/9e0d7869f5cf44d3b400fb72a2eee34c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/70cf1fdcf9b747bb9b5c27fba8a8a09f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230528/4973f1fcb29442f09b2c50c68ae42a4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230528/73b1da1899ba40e08f81ec6e856aeb16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230528/48e874949c604903a10dfcbaa04846e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20230528/b7da6160d2694e48816eff7b176ce8ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20230528/7e09cc37da7047cb96011e5173c196d5.png