今日全國默哀三分鐘_如何用一行代碼將網頁變成灰色？

一.看在前面：

用嗶哩嗶哩舉例：


框住的CSS 內容爲：

html.gray {
-webkit-filter: grayscale(.95);
}
我們將其取消，就能發現網站的顏色就能重新還原回來了
由此可見，這個樣式作用在html節點之上用的是全局的效果。

二.實現網頁變灰效果

寫在在css文件裏面

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} 
<!--    可以是整個網站變成灰色的     -->

查看效果，這裏用之前作業做的網頁舉例：

加上之後：

另外幾種參考樣式：

html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); } 

使用方法：這段代碼可以變網頁爲黑白，將代碼加到CSS最頂端就可以實現素裝。
如果網站沒有使用CSS，可以在網頁/模板的HTML代碼和 之間插入：

<style>
html{filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style> 

可能使用這個css 不能生效，是因爲網站沒有使用最新的網頁標準協議

請將網頁最頭部的替換爲以上代碼。

有一些網站FLASH動畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的<object …>和之間插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最簡單的把頁面變成灰色的代碼是在head 之間加

方法三，

html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} 

三.filter分析

官方介紹內容如下：

filter CSS 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。
CSS 標準裏包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。

這裏我們抓住關鍵字——濾鏡。

這裏我們舉例幾種用法：
這裏參考菜鳥教程

1.圖片使用高斯模糊效果：

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

更改數值後
#### 2.Brightness 函數實例

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

更改數值：

3.Contrast 函數實例

調整圖像的對比度:

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

4.drop-shadow 函數實例

給圖像設置一個陰影效果:

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

5.Grayscale 函數實例

將圖像轉換爲灰度圖像:

img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

6.hue-rotate() 函數實例

給圖像應用色相旋轉:

img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

7.Invert 函數實例

反轉輸入圖像:

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

8.Opacity 函數實例

轉化圖像的透明程度:

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}

9.Saturate 函數實例

轉換圖像飽和度:

img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}

10.Sepia 函數實例

將圖像轉換爲深褐色:

img {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}

11.複合函數

使用多個濾鏡，每個濾鏡使用空格分隔。

注意: 順序是非常重要的 (例如使用 grayscale() 後再使用 sepia()將產生一個完整的灰度圖片)。

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);

本次介紹就到這，祝大家學習愉快 😃