一段css讓全站變灰的代碼總結(jié)

發(fā)布時(shí)間：2020-04-04 10:01:57 作者：tiutiu

這篇文章主要介紹了一段css讓全站變灰的代碼總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

為表達(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分鐘，汽車(chē)、火車(chē)、艦船鳴笛，防空警報(bào)鳴響。

想到以往默哀日訪(fǎng)問(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)文章，希望大家以后多多支持腳本之家！

Tag：全站變灰 css

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

一段css讓全站變灰的代碼總結(jié)

相關(guān)文章

最新評(píng)論

文章分類(lèi)

大家感興趣的內(nèi)容

最近更新的內(nèi)容