日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長提供免費收錄網(wǎng)站服務(wù),提交前請做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

灰色顯示百度首頁

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


css樣式Filter屬性

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

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

Filter調(diào)整測試Demo

如上圖所示,通過設(shè)置Filter的屬性取值,實現(xiàn)對顏色色彩的控制。主要屬性說明如下:

1、filter: blur()方法

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

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

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

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

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

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

2、filter: grayscale()方法

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

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

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


一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

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

使用filter提供的 grayscale()方法對頁面進(jìn)行灰度設(shè)置實現(xiàn)效果描述如上圖,我們可以快速實現(xiàn)將頁面快速變灰。目前瀏覽器的內(nèi)核型號較多,對CSS的支持與解析情況不相同,在進(jìn)行頁面灰度處理時需要考慮到用戶終端瀏覽器的類型,需要進(jìn)行CSS樣式的兼容性設(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)頁變灰實例

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

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

測試原始頁面

按照編碼要求,我們在該頁面頭部<head>編寫樣式文件,實現(xiàn)變灰處理,所添加代碼描述如下:

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

變灰實現(xiàn)代碼

在頁面添加變灰代碼之后,我們可以看出明顯的變灰效果,效果描述如下:

一文讀懂如何快速實現(xiàn)網(wǎng)頁頁面變灰?

頁面變灰實現(xiàn)效果


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

分享到:
標(biāo)簽:頁面
用戶無頭像

網(wǎng)友整理

注冊時間:

網(wǎng)站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨大挑戰(zhàn)2018-06-03

數(shù)獨一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運動步數(shù)有氧達(dá)人2018-06-03

記錄運動步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績評定2018-06-03

通用課目體育訓(xùn)練成績評定