清明節(jié)全網(wǎng)灰色主題實(shí)現(xiàn)原理

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

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

一、原理

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

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

二、實(shí)現(xiàn)

簡(jiǎn)單說(shuō)完灰度。我們?cè)賮?lái)看下css中有哪些濾鏡：

毫無(wú)疑問(wèn)，做清明節(jié)灰色主題的網(wǎng)頁(yè)，我們要選擇灰度grayscale這個(gè)濾鏡。

屬性寫法：

filter: grayscale();

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

我們的網(wǎng)站要做純灰色，也就是灰得最徹底，所以括號(hào)里應(yīng)該是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

這段代碼是我們必須要寫的?；A(chǔ)屬性寫完后，補(bǔ)上一些兼容不同瀏覽器的屬性。

三、代碼嚴(yán)謹(jǐn)進(jìn)階

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。