建站
咨詢
售后
建站咨詢
新聞中心
今天從前端的角度看看網(wǎng)頁變灰是如何實現(xiàn)的，以及相關(guān)使用技巧。
創(chuàng)新互聯(lián)自2013年起，先為鎮(zhèn)坪等服務(wù)建站，鎮(zhèn)坪等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為鎮(zhèn)坪企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
實現(xiàn)思路
先來看看一些主流網(wǎng)站是如何實現(xiàn)置灰的：
- BiliBili：
- 淘寶：
- 京東：
可以看到，這些網(wǎng)站實現(xiàn)置灰的方式不太一樣，但是大同小異。本質(zhì)上都是使用了 CSS 中的 filter 屬性。下面是 MDN 對 filter 屬性的解釋：
CSS 屬性 filter 將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。
簡單來說，filter 屬性就是用來給元素添加不同的濾鏡。該屬性中支持傳入多種 Filter 函數(shù)，其中 grayscale() 函數(shù)就是用于置灰的關(guān)鍵。grayscale() 函數(shù)將改變輸入圖像灰度，該函數(shù)有一個參數(shù)，表示轉(zhuǎn)換為灰度的比例。當(dāng)值為 100% 時，完全轉(zhuǎn)為灰度圖像；當(dāng)值為 0% 時圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘數(shù)。若未設(shè)置值，默認(rèn)是 0。
因此，只需將頁面的 html 元素設(shè)置以下樣式即可實現(xiàn)頁面置灰：
html {
filter: grayscale(100%);
}那為啥很多網(wǎng)站的置灰不止這一行屬性呢？可以看到京東的置灰代碼如下：
html.o2_gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-filter: gray;
filter: gray;
-webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}其實這些屬性最終的效果都是一樣的，它們?yōu)榱藢?filter 屬性進行兼容。filter 屬性是 CSS3 增加的屬性，在不同瀏覽器以及低版本瀏覽器上，filter 屬性的兼容性不盡相同：
對于上面的代碼，其中：
- -webkit-filter：帶有 webkit 前綴可以在 webkit 內(nèi)核的瀏覽器中生效；
- -moz-filter：帶有 moz 前綴可以在 Firefox 瀏覽器中生效；
- -ms-filter：帶有 ms 前綴可以在 IE 瀏覽器生效；
- -o-filter：帶有 o 前綴可以在 Opera 瀏覽器生效；
- 最后三行都是為了兼容 IE 內(nèi)核的瀏覽器。
那如何實現(xiàn)動態(tài)添加呢？只需要將這些濾鏡屬性寫在一個類中，在需要的時候動態(tài)的將該類型添加到 html 標(biāo)簽上即可。
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-filter: gray;
filter: gray;
-webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}相關(guān)拓展
接下來我們看看 filter 屬性還有哪些實用的屬性值！
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();
（1）blur()：模糊
blur() 函數(shù)用于設(shè)置元素模糊效果， 它將高斯模糊視覺效果應(yīng)用于元素。此函數(shù)接受一個 CSS 長度值來確定屏幕上有多少像素需要相互融合以生成模糊結(jié)果。傳遞的 CSS 長度值越大，應(yīng)用到元素的模糊度就越高。如果不提供值，則使用默認(rèn)值 0。
.image {
-webkit-filter: blur(0|2px|5px);
filter: blur(0|2px|5px);
}下面是使用三個值時對應(yīng)的效果：
這個屬性可以用來實現(xiàn)常見的毛玻璃效果。
（2）brightness()：亮度
brightness() 函數(shù)可用于調(diào)整圖像的亮度級別，使其看起來更亮或更暗。當(dāng)值為 0% 時，會產(chǎn)生全黑圖像。值為 100% 或 1 會使圖像保持其原始亮度級別。大于或小于 100% 或 1 的值決定圖像的暗度或亮度。
.image {
-webkit-filter: brightness(50%|100%|200%);
filter: brightness(50%|100%|200%);
}下面是使用三個值時對應(yīng)的效果：
（3）contrast()：對比度
contrast() 函數(shù)用于調(diào)整圖像的對比度，也就是調(diào)整圖像最暗和最亮部分之間的亮度差異 。它接受百分比或小數(shù)值來確定圖像的對比度級別——值為 0 會導(dǎo)致完全灰色的圖像。高于 100% 和 1 的值會增加對比度，而低于 100% 的參數(shù)會降低圖像的對比度。
.image {
-webkit-filter: contrast(50%|100%|200%);
filter: contrast(50%|100%|200%);
}下面是使用三個值時對應(yīng)的效果：
（4）opacity()：不透明度
opacity() 函數(shù)將透明效果應(yīng)用于圖像。它接受百分比或小數(shù)值來決定應(yīng)用于圖像的透明度。0% 或 0 的不透明度將產(chǎn)生完全透明的元素。100% 不透明度將顯示不透明。將不透明度設(shè)置在 0% 和 100% 之間將使元素或圖像部分透明。
.image {
-webkit-filter: opacity(10%|40%|80%);
filter: opacity(10%|40%|80%);
}下面是使用三個值時對應(yīng)的效果：
那這個不透明度濾鏡和CSS中的 opacity 屬性有啥區(qū)別的？它們都用于控制元素的透明度。但是 filter 屬性會啟動硬件加速。瀏覽器會將計算任務(wù)卸載到圖形處理單元 (GPU) — 一種旨在加速系統(tǒng)內(nèi)圖形渲染的專用處理器。這會提高瀏覽器的效率并釋放 CPU 來執(zhí)行其他任務(wù)。
（5）sepia() ：棕褐色
sepia() 函數(shù)可以為圖像添加柔和的褐色色調(diào)，使圖像看起來更溫暖、更復(fù)古。它類似于使用灰度濾鏡，但色調(diào)為褐色。它接受 0 到 1 之間的小數(shù)值，或最大為 100% 的百分比值。值為 0 會使圖像保持不變。值為 100% 或 1 會將圖像完全變?yōu)樽睾稚橛?0% 和 100% 之間的值會使圖像的色調(diào)介于其原始顏色和完全棕褐色之間。
.image {
-webkit-filter: sepia(10%|40%|80%);
filter: sepia(10%|40%|80%);
}下面是使用三個值時對應(yīng)的效果：
（6）drop-shadow()：陰影
drop-shadow() 函數(shù)用于增加圖像的陰影，和 box-shadow 的作用類似，使圖像看起來更加立體。
drop-shadow() 函數(shù)接受四個參數(shù)：
：長度值，指定元素和投影之間的水平距離。正值將陰影置于元素右側(cè)，負(fù)值將陰影置于左側(cè)。 ：長度值，指定元素和投影之間的垂直距離。正值將陰影置于元素下方，負(fù)值將陰影置于其上方。 : 陰影的模糊半徑指定為 CSS 長度單位。值越大，陰影變得越模糊。如果未指定，則默認(rèn)為 0，產(chǎn)生清晰且不模糊的陰影。不允許使用負(fù)值。 ：陰影的顏色。如果未指定，則默認(rèn)為黑色。
.image-1 {
filter: drop-shadow(0);
}
.image-2 {
-webkit-filter: drop-shadow(4px 4px 10px yellow);
filter: drop-shadow(4px 4px 10px yellow);
}
.image-3 {
-webkit-filter: drop-shadow(8px 8px 12px yellow);
filter: drop-shadow(8px 8px 12px yellow);
}下面是使用三個值時對應(yīng)的效果：
（7）saturate()：飽和度
saturate() 函數(shù)用于改變元素中顏色的飽和度。飽和元素的顏色比較鮮艷；對于曝光不足的圖像可以增加飽和度，反之亦然。飽和度可以用百分比表示，0% 表示完全不飽和，100% 表示與原圖像一樣。
.image {
-webkit-filter: saturate(10%|150%|350%);
filter: saturate(10%|150%|350%);
}下面是使用三個值時對應(yīng)的效果：
（8）注意事項
上面介紹的濾鏡都是單個使用的，其實 filter 屬性支持設(shè)置多個濾鏡，其語法如下：
.multiple-effects {
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}CSS 會根據(jù)它們出現(xiàn)的順序?qū)⑺鼈儜?yīng)用于元素：
img {
filter: opacity(50%) drop-shadow(20px 10px 0px black);
}除此之外，filter 屬性還接受以下兩個值：
- initial?：filter? 屬性的默認(rèn)值，會解析為none。
- inherit?：從元素的直接父級計算的filter 屬性的值。
網(wǎng)站題目：前端如何實現(xiàn)網(wǎng)頁變灰功能？
文章來源：http://www.5511xx.com/article/dhgjjjd.html
