CSS网页变灰色代码方法分享

淩亂°似流年 2024-03-16 16:34 28阅读 0赞

发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此我给大家总结了两种CSS网页变灰色代码方法，分享给大家。

![2a739316b49c466eb91216e6b815f231.png][]

### CSS filter方法 ###

直接写在BODY里面，只需要将CSS代码：filter: grayscale(100%);放到body元素里面。如下图所示：

![efa947f8123e4a99aaea7f7f9a583559.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;</code><code>body</code>&nbsp;<code>style</code><code>=</code><code>"filter:&nbsp;grayscale(100%);"</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

或者写在CSS文件里面，兼容写法

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> </td> 
   <td> <p><code>html&nbsp;{ </code></p> <p><code>-webkit-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>-moz-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>-ms-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>-o-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=</code><code>1</code><code>);</code></p> <p><code>_filter:</code><code>none</code><code>;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

简洁的写法

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>html&nbsp;{ </code></p> <p><code>filter:&nbsp;progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);</code></p> <p><code>-webkit-filter:&nbsp;grayscale(100%);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### CSS grayscale方法 ###

直接在网站的CSS样式文件中加入下面的代码，这样不用改html代码。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>html&nbsp;{-webkit-filter:&nbsp;grayscale(100%);-moz-filter:&nbsp;grayscale(100%);-ms-filter:&nbsp;grayscale(100%);-o-filter:&nbsp;grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

或者使用下面的代码，兼容写法推荐上面的代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </td> 
   <td> <p><code>html{ </code></p> <p><code>-webkit-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>-moz-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>-ms-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>-o-filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>filter:&nbsp;grayscale(</code><code>100%</code><code>);</code></p> <p><code>filter:&nbsp;</code><code>url</code><code>(</code><code>"data:image/svg+xml;utf8,&lt;svg&nbsp;xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter&nbsp;id=\'grayscale\'&gt;&lt;fecolormatrix&nbsp;type=\'matrix\'&nbsp;values=\'0.3333&nbsp;0.3333&nbsp;0.3333&nbsp;0&nbsp;0&nbsp;0.3333&nbsp;0.3333&nbsp;0.3333&nbsp;0&nbsp;0&nbsp;0.3333&nbsp;0.3333&nbsp;0.3333&nbsp;0&nbsp;0&nbsp;0&nbsp;0&nbsp;0&nbsp;1&nbsp;0\'&gt;&lt;/fecolormatrix&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"</code><code>);</code></p> <p><code>filter:&nbsp;progid:DXImageTransform.Microsoft.BasicImage(grayscale=</code><code>1</code><code>);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

简洁写法

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;html&nbsp;style=</code><code>"filter:&nbsp;progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:&nbsp;grayscale(100%);"</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[2a739316b49c466eb91216e6b815f231.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f316c1cdb83a4e42aa3021635e87b03b.png
[efa947f8123e4a99aaea7f7f9a583559.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2467b487bcf44443a471a1b7fd4f8bb4.png