網(wǎng)站變灰色兼容代碼 包括圖片 支持所有瀏覽器
我要評(píng)論一般在全國(guó)哀悼日，大地震的日子，清明節(jié)，我們都會(huì)讓自己的網(wǎng)站全站灰色，以表示對(duì)逝者的悼念。那么下面分享幾種方法
1、直接body中加入代碼即可
實(shí)現(xiàn)這種效果很簡(jiǎn)單，只需要一句css代碼：filter: grayscale(100%);，將其放到body元素的樣式里面就行了。我們自己實(shí)現(xiàn)的效果：
2、直接在調(diào)用的css樣式文件中，這樣不用改html代碼。
直接上代碼：
/*網(wǎng)站變灰*/
html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}
或下載的代碼，推薦上面的代碼
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'></fecolormatrix></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
3、騰訊網(wǎng)的做法：
<style>
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}
</style>
其他的一些方法：
1.網(wǎng)頁(yè)黑白代碼外部樣式（寫入*.css文件請(qǐng)用）
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
2.網(wǎng)頁(yè)黑白代碼內(nèi)部樣式（寫入頭部head標(biāo)簽里面）
<style type="text/css">
<!--
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
-->
</style>
3.網(wǎng)頁(yè)黑白代碼內(nèi)聯(lián)式（寫入html標(biāo)簽，找到html）
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">
就一句代碼，腳本之家的小編收藏的，簡(jiǎn)單實(shí)用，希望能幫到大家。
相關(guān)文章
利用CSS將網(wǎng)站網(wǎng)頁(yè)變灰色代碼示例
這篇文章主要給大家介紹了關(guān)于利用CSS將網(wǎng)站網(wǎng)頁(yè)變灰色的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看2017-07-04- 很多圖片編輯如Photoshop很容易把你的彩色圖像變成灰度，不幸的是,這樣的效果想做在網(wǎng)絡(luò)上并不容易，下面為大家介紹下三種讓網(wǎng)站圖片生成灰色效果的方法2014-03-20
- 2008.5.12四川汶川大地震，帶走了很多生命，令人惋惜，為了表示對(duì)遇難同胞的深切哀悼，決定2008年5月19日至21日為全國(guó)哀悼日。在此期間，許多網(wǎng)站將風(fēng)格改為“黑、白、灰”2020-04-04
修改CSS樣式實(shí)現(xiàn)網(wǎng)頁(yè)灰色(沒(méi)有顏色只有淺色黑白)的幾個(gè)方法整理
一般在清明節(jié)，全國(guó)哀悼日，大地震的日子，還有這次疫情，以及一些影響力很大的偉人逝世或紀(jì)念日的時(shí)候，身為站長(zhǎng)的我們都會(huì)響應(yīng)國(guó)家的號(hào)召讓自己的網(wǎng)站的全部網(wǎng)頁(yè)變成灰色2020-04-04