乾貨 一段css讓全站變灰

2021-10-10 11:35:25 字數 803 閱讀 8404

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

filter: grayscale 使用可以調整元素的灰度值

.gray-filter

複製**實戰

以b站為例:

在正常的情況下b站這個導航欄滑到下面之後是fixed在頁面的頂部的

但假如你把這段css加到了body上會發生下面這種情況:

你可以發現它不再固定在頁面的頂部了,而是超出去了螢幕外面,螢幕左下角的小電視人也跑到了頁面上半部分去,為什麼會發生這樣的情況呢?

我去google查閱了相關資料,發現:

對於指定了 filter 樣式且值不為 none 時,被應用該樣式的元素其子元素中如果有 position 為 absolute 或 fixed 的元素,會為這些元素建立乙個新的容器,使得這些絕對或固定定位的元素其定位的基準相對於這個新建立的容器。

我們可以聯想出fixed是相對於html根容器來定位的,如果在body上設定了filter則會建立乙個新的定位基準,而頁面滾動時將body滾動出了螢幕外,則body內所有子孫元素的fixed將產生不符合預期的效果。

如何解決呢?

解決方案1

影響全站的方法我們可以將該樣式應用到根元素html上,即使建立了新的定位基準元素,也不會對子孫元素產生不符合預期的影響。

html

複製**效果:

解決方案2

非全站變灰我們可以將需要使用filter的元素單獨加上

一段讓所有的程式設計師震撼的文字

今天我們談談mda和企業應用 問 請談談mda真的能不用程式設計麼 可從另乙個角度講,企業應用更多時候是做的僅是乙個db的殼 shell 而已,所以還是很容易的實現mda的 ejb部署?idl?web serivce?全部可以生成 問 據說現在的計算機人員很缺乏,隨著計算機的發展和普及計算機人才會更...

如何讓Qt 的程式等待一段時間1

qtime t t.start while t.elapsed 1000 不停地處理事件,以使得程式保持響應。qthread sleep 1 在while 1 死迴圈裡加上這個,cpu沒空去幹其他的事情,在多程序的情況下會影響其他程式的啟動 響應速度測試的乙個小例子 class widget pub...

如何讓Qt 的程式等待一段時間2

在qt程式中,我們有時候會遇到這樣的需求,比如讓程式暫停 休息 休眠 一段時間。最開始我需要這樣的需求時候,我第一反應想到的是在qt assistant 中搜尋sleep方法,企圖尋找讓程式暫停 休眠一段時間的方法,不過,搜尋結果顯然令我很失望,並沒有找到直接滿足需求的sleep方法,不過看到了qt...