首頁>>前端開發
一、前言
在很多時候我們需要把整個網站變灰,比如“致敬”。來看看網站是如何實現整體變灰的。
人的一生是短暫的,重要的是能夠在短暫的時間內造就無限的價值。由衷的表示致敬我們將永遠銘記!
如果首頁html換成黑白風格的,這個好實現??墒敲總€封面圖都重新做一張黑白的版本,每個都是用戶自己的投稿啊,怎么保證封面圖都能黑白色呢?后期靠人工換的話,那代價也大了,而且也很傻。
二、解密HTML如何將網站變為黑白
眾所周知我們平時使用的網站都是IT從業者辛勤勞動所創造出來的,其實創造一個黑白網頁其實并不難,真的很簡單,因為只需要一行代碼。
html {-webkit-filter: grayscale(100%);}
是的你沒看錯就這一行一個網頁就變成了一個灰度圖
下面我將進行一次簡單的演示
這是一個非常簡單的一段HTML代碼
突然我發現在html根結點html標簽下面有一個屬性:filter: grayscale(1);
這是一個非常簡單的一段HTML代碼
html{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }
filter 屬性定義了元素(通常是<img>)的可視效果(例如:模糊與飽和度)。
瀏覽器支持:
grayscale():
將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像,值為0%圖像無變化。值在0%到100%之間,則是效果的線性乘子。若未設置,值默認是0。
三、IE瀏覽器
上面所說的css3屬性IE瀏覽器并不支持,其實這樣做已經覆蓋了大部分瀏覽器
filter: gray;
這個屬性直接加載html上是不管用的,如果需要圖片變灰可以只將樣式作用于img標簽,或者用*通配符作用于所有元素,這樣整個網站就會變灰。
經測試,在IE7-9都是沒問題的,IE9以上不能生效。
四、通用方案
如果你執意所有的瀏覽器都有這個效果,可以通過Greyscale.js實現:
在頁面引入js文件:
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
然后:
grayscale(document.getElementsByTagName("img"));
或者直接這樣:
grayscale(document.getElementsByTagName("html"));
實現原理:IE瀏覽器下是添加灰度濾鏡,這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法,然后對每個像素點進行灰度轉換。
因此,在現代瀏覽器下,對于該方法,圖片的灰度處理有兩個局限性:
1. 速度。300*300這張一般般大小的圖片變灰就要數秒之久;
2. 跨域。安全性機制,無法轉換跨域的圖片為黑白色。
五、更多
對比度:filter: contrast();
色相旋轉:filter: hue-rotate();
陰影: filter: drop-shadow() ;
- 上一篇: 優化 CSS 代碼的12個小技巧
- 下一篇: pbootcms網站寶塔目錄權限設置
猜你喜歡
- 2022-11-10 【官方文檔】百度搜索網站被黑防范指南
- 2022-11-03 【干貨必備】百度搜索優質內容指南
- 2022-08-01 百度隱藏“快照”功能:原因未知-百度快照沒了?
- 2022-06-20 淺析“百度搜索基礎信息設置規范”!
- 2022-06-15 SEO尷尬,有排名,沒流量,沒咨詢,怎么辦?
- 2022-05-16 IE瀏覽器宣布6月16日退役 Edge瀏覽器將接棒
- 搜索
-
- 2023-09-07 優化師過了30歲,還能找到好工作嗎?
- 2023-09-05 看完就能用,SEM推廣方法論!
- 2023-08-28 又又又升級了!百度搜索新增“AI穩投”
- 2023-08-25 “抄”爆同行素材,這樣搞!
- 2023-08-25 如何利用A/B測試,優化廣告素材?
- 2023-08-18 一鍵起量,百度搜索又一重磅升級!
- 2023-08-17 小紅書,再不做就晚了!
- 2023-08-10 廣告素材這樣設計,點擊率翻5倍!
- 2023-08-03 百度競價太卷了,怎么辦?
- 2023-08-02 信息流渠道如何選擇?4大渠道優劣對比
- 2023-07-28 14個技巧,讓你的頁面轉化提高一倍!
- 2023-07-27 推廣必用8個Excel函數,你用過幾個?
- 2019-11-01 Origin DNS error:使用百···
- 2020-06-20 “401 - 未授權: 由于憑據無效,訪···
- 2020-12-01 一級域名好還是二級域名好?
- 2020-10-13 百度抓取診斷工具一直抓取失敗怎么辦?
- 2019-12-09 域名解析后,網站返回狀態碼511應對方法
- 2019-08-12 網站出現“403,服務器上文件或目錄拒絕···
- 2021-04-13 html/txt文件中文用瀏覽器打開有亂···
- 2020-09-03 element.style樣式的修改
- 2021-01-06 百度移動端的搜索結果上線“踩頂”功能,對···
- 2019-11-06 正確打開.db數據庫文件的兩種方式,避免···
- 2020-10-20 UC神馬搜索怎么做快速排名優化
- 2020-04-10 百度下拉框怎么刷?刷百度下拉框軟件原理及···
- 2020-09-27 css3實現一個div設置多張背景圖片
- 2019-03-05 新網站備案全流程詳解
- 2019-06-25 網站頁面美觀程度與網站排名優化有什么關系···
- 2021-03-23 SEO的迷茫:未來會走向何方?
- 2019-09-20 城里套路深:錨定效應在用戶決策時的應用
- 2019-12-03 拜托別黑我!seo負面信息優化快速處理方···
- 2020-05-19 網絡推廣在精不在多:提供正面價值為出發點···
- 2022-09-21 Img{ Max-Width:100%}···
- 2020-12-01 所有SEO執行人員都應考慮這幾點
- 2020-01-09 除了寫文章和換友鏈,seo還有能做哪些有···
- 2020-10-28 關鍵詞長時間不出排名我們應該如何應對?
- 2020-05-14 網站被k,收錄歸零消失,是怎么回事以及怎···
- 熱門標簽
-
- Error 1016
- Origin DNS error
- 源DNS服務器錯誤
- element.style
- css
- .db文件
- 域名解析
- 別名解析
- CNME解析
- A記錄
- asp.net
- php
- jsp
- 開發語言對比
- 寶塔
- 白名單
- 香港主機
- 主機白名單
- 301
- 301重定向
- 301永久重定向
- 個人備案
- 企業備案
- 網站備案
- 500錯誤
- 錨點跳轉
- 字體大小
- 用戶體驗
- 虛擬主機
- 網站搭建
- 自適應網站
- web前端
- 移動端
- 響應式網站
- 網站被黑
- 后臺入侵
- 源碼安全
- 備案駁回
- 阿里云備案
- ftp
- flashfxp
- js空鏈接
- 阿里云服務器
- 實例類型
- 開源CMS
- 織夢cms
- 百度轉碼
- 禁止轉碼
- 偽元素選擇器
- 偽類選擇器
- CSS3
- 網站建設
- 低成本網站
- 域名備案
- win10連接遠程服務器
- 谷歌插件
- Chrome
- 服務器流量
- 網站流量耗盡
- 蜘蛛
- 屏蔽蜘蛛
- 網站體驗設計
- 老年用戶
- html標簽
- seo標簽
- 網站安全
- X-Powered-By
- robots.txt
- 服務器空間
- 網站空間選擇
- 網站設計
- seo要點
- seo建站方案
- 0收錄
- 新域名收錄
- 網站收錄
- 獨立ip主機
- seo服務器
- 服務器穩定性
- 網站續費
- dede
- 分頁樣式代碼
- 網站標簽
- 標簽優化
- pbootcms
- 權限設置
- javascript
- 編程語言
- 營銷型網站
- 定制網站
- filter
- 濾鏡
- PbootCMS
- sqlite
- mysql
- 數據庫
- SQL
- Sqlite
- css3