一段css讓全站變灰的代碼總結(jié)
我要評(píng)論為表達(dá)全國(guó)各族人民對(duì)抗擊新冠肺炎疫情斗爭(zhēng)犧牲烈士和逝世通報(bào)的深切哀悼，國(guó)務(wù)院今天發(fā)布公告，決定2020年4月4日（明天）舉行全國(guó)性哀悼活動(dòng)。在此期間，全國(guó)和駐外使館下半旗致哀，全國(guó)停止公共娛樂(lè)活動(dòng)，4月4日10點(diǎn)開(kāi)始，全國(guó)人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報(bào)鳴響。
想到以往默哀日訪問(wèn)網(wǎng)站時(shí)發(fā)現(xiàn)整站會(huì)變成全灰，即想到如果立即開(kāi)始開(kāi)發(fā)、設(shè)計(jì)圖修改等工作也會(huì)消耗大量的時(shí)間與精力，那會(huì)不會(huì)有css可以直接處理所有的元素將他們變灰，隨即想到了css3的filter（濾鏡），并也證實(shí)了這一想法的可行性。
filter: grayscale 使用可以調(diào)整元素的灰度值
.gray-filter {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-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\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
實(shí)戰(zhàn)
以B站為例：
在正常的情況下B站這個(gè)導(dǎo)航欄滑到下面之后是fixed在頁(yè)面的頂部的
但假如你把這段css加到了body上會(huì)發(fā)生下面這種情況：
你可以發(fā)現(xiàn)它不再固定在頁(yè)面的頂部了，而是超出去了屏幕外面，屏幕左下角的小電視人也跑到了頁(yè)面上半部分去，為什么會(huì)發(fā)生這樣的情況呢？
我去Google查閱了相關(guān)資料，發(fā)現(xiàn):
對(duì)于指定了 filter 樣式且值不為 none 時(shí)，被應(yīng)用該樣式的元素其子元素中如果有 position 為 absolute 或 fixed 的元素，會(huì)為這些元素創(chuàng)建一個(gè)新的容器，使得這些絕對(duì)或固定定位的元素其定位的基準(zhǔn)相對(duì)于這個(gè)新創(chuàng)建的容器。
我們可以聯(lián)想出fixed是相對(duì)于html根容器來(lái)定位的，如果在body上設(shè)置了filter則會(huì)創(chuàng)建一個(gè)新的定位基準(zhǔn)，而頁(yè)面滾動(dòng)時(shí)將body滾動(dòng)出了屏幕外，則body內(nèi)所有子孫元素的fixed將產(chǎn)生不符合預(yù)期的效果。
如何解決呢？
解決方案1
影響全站的方法我們可以將該樣式應(yīng)用到根元素html上，即使創(chuàng)建了新的定位基準(zhǔn)元素，也不會(huì)對(duì)子孫元素產(chǎn)生不符合預(yù)期的影響。
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-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\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
效果：
解決方案2
非全站變灰我們可以將需要使用filter的元素單獨(dú)加上
<html>
<body>
<div class="gray-filter"></div>
</body>
</html>
<style>
.fixed {
position: fixed;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
background-color: #f00;
}
.gray-filter {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-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\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
</style>
到此這篇關(guān)于一段css讓全站變灰的代碼總結(jié)的文章就介紹到這了,更多相關(guān)css全站變灰內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(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用css3實(shí)現(xiàn)當(dāng)鼠標(biāo)移進(jìn)去時(shí)當(dāng)前亮其他變灰效果
這篇文章主要介紹了用css3實(shí)現(xiàn)當(dāng)鼠標(biāo)移進(jìn)去時(shí)當(dāng)前亮其他變灰效果,需要的朋友可以參考下2014-04-08css頁(yè)面變灰度兼容ie、firefox、chrome、opera、safari實(shí)現(xiàn)樣式
本文為大家詳細(xì)介紹下使用純css讓頁(yè)面變灰度并且兼容ie、firefox、chrome、opera、safari，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-22網(wǎng)頁(yè)變灰配合全國(guó)哀悼日的css代碼 20100421
這段代碼可以變網(wǎng)頁(yè)為黑白，將代碼加到CSS最頂端就可以實(shí)現(xiàn)素裝。建議全國(guó)站長(zhǎng)動(dòng)起來(lái)。為在地震中遇難的同胞哀悼。2010-04-20- 最近項(xiàng)目中遇到個(gè)問(wèn)題，就是要使圖片變灰。我想了幾種解決方案。2010-02-11