純css實現圖片或者頁面變灰色

2020 年 4 月 4 日
筆記

前言

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

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>