灰色顯示百度首頁(yè)

今天早上醒來(lái)一看各大網(wǎng)站，為表示新冠肺炎疫情死難者的哀悼，各大網(wǎng)站均將頁(yè)面變?yōu)榛疑@示，顯示的極為莊重肅穆。本文主要介紹常用網(wǎng)頁(yè)頁(yè)面快速變灰色的方法。

---

CSS樣式Filter屬性

對(duì)于網(wǎng)頁(yè)而言，頁(yè)面色彩、布局等主要受到層疊樣式文件CSS控制，網(wǎng)站頁(yè)面整體色彩的改變可以通過(guò)CSS進(jìn)行整體的控制。在CSS中可以通過(guò)filter濾鏡屬性實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)元素進(jìn)行圖像、背景及素材的渲染。

Filter調(diào)整測(cè)試Demo

如上圖所示，通過(guò)設(shè)置Filter的屬性取值，實(shí)現(xiàn)對(duì)顏色色彩的控制。主要屬性說(shuō)明如下：

1、filter: blur()方法

該方法主要用于實(shí)現(xiàn)對(duì)圖像設(shè)置高斯模塊，及屏幕上的像素融合程度即模糊程度。其參數(shù)需要以像素值形式進(jìn)行提供。參數(shù)值越大模糊程度越高。示例如下圖：

網(wǎng)頁(yè)中顯示的今日頭條圖標(biāo)

在未使用filter屬性未設(shè)置時(shí)，今日頭條顯示的原始圖片效果如上圖所示。我們可以進(jìn)一步對(duì)頁(yè)面添加style樣式調(diào)整filter blur參數(shù)值，可實(shí)現(xiàn)頁(yè)面的模糊程度。如blur參數(shù)取值為2個(gè)像素，效果如下：

blur參數(shù)取值為2顯示效果

2、filter: grayscale()方法

該方法是用于實(shí)現(xiàn)頁(yè)面變灰的主要方法，主要用于設(shè)置頁(yè)面顯示的灰度。參數(shù)值需要以百分比形式進(jìn)行提供，0%表示未進(jìn)行灰度調(diào)整，100%表示將頁(yè)面完全轉(zhuǎn)化為灰度。我們還是以今日頭條圖標(biāo)為例，對(duì)其進(jìn)行灰度設(shè)置進(jìn)行說(shuō)明。當(dāng)灰度取值設(shè)置為20%時(shí)效果如下圖1所示，當(dāng)灰度值設(shè)置為100%時(shí)效果如圖2所示：

圖一：灰度20%設(shè)置顯示效果

圖二：灰度100%設(shè)置圖片顯示效果

使用filter提供的 grayscale()方法對(duì)頁(yè)面進(jìn)行灰度設(shè)置實(shí)現(xiàn)效果描述如上圖，我們可以快速實(shí)現(xiàn)將頁(yè)面快速變灰。目前瀏覽器的內(nèi)核型號(hào)較多，對(duì)CSS的支持與解析情況不相同，在進(jìn)行頁(yè)面灰度處理時(shí)需要考慮到用戶終端瀏覽器的類型，需要進(jìn)行CSS樣式的兼容性設(shè)置。實(shí)現(xiàn)基本代碼描述如下：

-webkit-filter: grayscale(100%); //(Apple Safari內(nèi)核)-moz-filter: grayscale(100%);?//(Firefox瀏覽器)-ms-filter: grayscale(100%); //(Internet Explorer(IE)瀏覽器)-o-filter: grayscale(100%);?//(Opera瀏覽器)

---

網(wǎng)頁(yè)變灰實(shí)例

在明確網(wǎng)頁(yè)變灰所需使用濾鏡效果之后，我們可以使用其屬性進(jìn)行頁(yè)面變灰效果。以下給出本人編寫(xiě)的一個(gè)簡(jiǎn)單Demo進(jìn)行變灰測(cè)試，原始頁(yè)面效果如下：

測(cè)試原始頁(yè)面

按照編碼要求，我們?cè)谠擁?yè)面頭部

編寫(xiě)樣式文件，實(shí)現(xiàn)變灰處理，所添加代碼描述如下：

變灰實(shí)現(xiàn)代碼

在頁(yè)面添加變灰代碼之后，我們可以看出明顯的變灰效果，效果描述如下：

頁(yè)面變灰實(shí)現(xiàn)效果

---

本文給出了網(wǎng)頁(yè)頁(yè)面變灰的實(shí)現(xiàn)簡(jiǎn)單方法，作為網(wǎng)頁(yè)設(shè)計(jì)人員、前端開(kāi)發(fā)人員應(yīng)當(dāng)能夠掌握基本使用方法，實(shí)現(xiàn)頁(yè)面的快速改變。

總結(jié)

以上是生活随笔為你收集整理的word图片填充之后图片颜色变灰了_一文读懂如何快速实现网页页面变灰？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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