前言

今天是個沉痛的日子，全國哀悼英雄，各大平臺平日鮮麗的介面置紛紛換成了灰色，以表對逝者的安息與尊敬！！對付疫病，我沒多大的本事，只能記錄一點點知識來提升自己擅長的技術，待到將來能為國家盡一份綿薄之力

css3 greyscale （灰度）

greyscale是css 3 filter裡的一種屬性，進行灰色濾鏡。當然css3 filter還有其它濾鏡屬性，很實用，例如：高斯模糊、調節亮度、色相旋轉、飽和度等等。css filter這一用法允許將單個影象用於多個目的不同的影象，或者在瀏覽器中應用過濾器，而不是在影象編輯器中進行過濾，不會出現大小比原始影象大，從而可以更快地載入頁面並減少資料傳輸。

元素

css 3 grcyscale適用於以下元素

• 圖形元素 »
• <a>
• <defs>
• <glyph>
• <g>
• <marker>
• <missing-glyph>
• <pattern>
• <svg>
• <switch>
• <symbol>

圖形元素 

html準備兩張img

<img src="./gray.png" alt=""> 
<img src="./gray.png" alt="" class="gray">

 css設定其中一張圖片灰色

.gray{
  /*grayscale(val):val值越大灰度就越深*/
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

 a標籤

<a href="#" >逝者安息</a>
<a href="#" class="gray">逝者安息</a>

效果 

svg(子元素：defs、glyph、g、markey、missing-glyph、pattern、switch、symbol)

<svg width="80px" height="30px" viewBox="0 0 80 30"
                 xmlns="http://www.w3.org/2000/svg">

    <defs>
        <linearGradient id="Gradient01">
            <stop offset="20%" stop-color="#39F" />
            <stop offset="90%" stop-color="#F3F" />
        </linearGradient>
    </defs>

    <rect x="10" y="10" width="60" height="10" 
                    fill="url(#Gradient01)"  />
</svg>
<svg width="80px" height="30px" viewBox="0 0 80 30"
                 xmlns="http://www.w3.org/2000/svg" class="gray">

    <defs>
        <linearGradient id="Gradient01" >
            <stop offset="20%" stop-color="#39F" />
            <stop offset="90%" stop-color="#F3F" />
        </linearGradient>
    </defs>

    <rect x="10" y="10" width="60" height="10" 
                    fill="url(#Gradient01)"  />
</svg>

效果

 如果想把整個頁面都渲染成灰色，一般在body標籤或者最大的父元素新增樣式grayscale，那麼父元素裡面能濾鏡的元素都會變成灰色。比如說現在的部落格園整個頁面是灰色的

 我開啟控制檯，找到了grayscale樣式元素

將它取消掉，部落格園介面就會變回原樣

結束語：向英雄致敬

逝者安息 家國永念

&n