亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2020-04-04 10:01:57   作者：tiutiu   我要評論
這篇文章主要介紹了一段css讓全站變灰的代碼總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

為表達(dá)全國各族人民對抗擊新冠肺炎疫情斗爭犧牲烈士和逝世通報的深切哀悼，國務(wù)院今天發(fā)布公告，決定2020年4月4日（明天）舉行全國性哀悼活動。在此期間，全國和駐外使館下半旗致哀，全國停止公共娛樂活動，4月4日10點開始，全國人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報鳴響。

想到以往默哀日訪問網(wǎng)站時發(fā)現(xiàn)整站會變成全灰，即想到如果立即開始開發(fā)、設(shè)計圖修改等工作也會消耗大量的時間與精力，那會不會有css可以直接處理所有的元素將他們變灰，隨即想到了css3的filter（濾鏡），并也證實了這一想法的可行性。

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);
}

實戰(zhàn)

以B站為例：

在正常的情況下B站這個導(dǎo)航欄滑到下面之后是fixed在頁面的頂部的

但假如你把這段css加到了body上會發(fā)生下面這種情況：

你可以發(fā)現(xiàn)它不再固定在頁面的頂部了，而是超出去了屏幕外面，屏幕左下角的小電視人也跑到了頁面上半部分去，為什么會發(fā)生這樣的情況呢？

我去Google查閱了相關(guān)資料，發(fā)現(xiàn):

對于指定了 filter 樣式且值不為 none 時，被應(yīng)用該樣式的元素其子元素中如果有 position 為 absolute 或 fixed 的元素，會為這些元素創(chuàng)建一個新的容器，使得這些絕對或固定定位的元素其定位的基準(zhǔn)相對于這個新創(chuàng)建的容器。

我們可以聯(lián)想出fixed是相對于html根容器來定位的，如果在body上設(shè)置了filter則會創(chuàng)建一個新的定位基準(zhǔn)，而頁面滾動時將body滾動出了屏幕外，則body內(nèi)所有子孫元素的fixed將產(chǎn)生不符合預(yù)期的效果。

如何解決呢？

解決方案1

影響全站的方法我們可以將該樣式應(yīng)用到根元素html上，即使創(chuàng)建了新的定位基準(zhǔn)元素，也不會對子孫元素產(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的元素單獨加上

 

<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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論