清明節全網灰色主題實現原理

首先，把網站做成一個純灰色主題，最簡單直接的辦法就是給整個網站加一個濾鏡，就像我們平時自拍完給照片加喜歡的濾鏡一樣。

我們的網頁也可以加濾鏡，但不是在整個網頁上面遮一個div蒙版，而是讓整個網頁 只有灰色 。

一、原理

灰色其實是個比較復雜的顏色。從白色到黑色，有無數種灰色，那么這些不同的灰色，就可以代替我們網頁中的五顏六色，使整個網頁有不同色值的灰色，但是依然很有層次，而且又可以表達出一種深沉的感情。什么是灰度，用圖片來解釋就是：

我們知道RGB代表三個顏色，Red、Green、Blue。rgb(0_255,0255,0~255) 三個顏色數值的大小結合，形成不同的顏色。但是當我們把三個顏色的數值調成同一個數字的時候，形成的顏色就是灰色（可以回憶我們小時候捏橡皮泥，我們是怎么把不同顏色一起揉捏，捏出來的灰色）。
所以灰度圖像是有256種顏色的（從0到255），即r、g、b的三個數值依然保持一致。
灰度越淡顏色越白，灰度越濃顏色就越黑。

二、實現

簡單說完灰度。我們再來看下css中有哪些濾鏡：

毫無疑問，做清明節灰色主題的網頁，我們要選擇灰度grayscale這個濾鏡。

屬性寫法：

filter: grayscale();

filter是 濾鏡 屬性，grayscale是 灰度 屬性值，grayscale括號里面可以是0、1或者百分比、小數or something？
括號里的數值越大，灰得越徹底。數值越小，原本的五顏六色保留得越好。

我們的網站要做純灰色，也就是灰得最徹底，所以括號里應該是100%。

filter: grayscale(100%); -webkit-filter: grayscale(100%); //兼容chrome和safari和2013年后Opera -moz-filter: grayscale(100%); //兼容Firefox -ms-filter: grayscale(100%); //兼容IE、Edge -o-filter: grayscale(100%); //兼容2013年前的Opera

這段代碼是我們必須要寫的。基礎屬性寫完后，補上一些兼容不同瀏覽器的屬性。

三、代碼嚴謹進階

filter是CSS3的屬性，我們知道一些較低版本的IE對CSS3的兼容性不是很好，但是老版本的IE中我們依然可以實現濾鏡的效果：

filter: url(data:image/svg+xml;utf8,#grayscale); //兼容IE10、IE11 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //兼容IE6～9

總結

以上是生活随笔為你收集整理的清明节全网灰色主题实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。