騰訊問卷 http ur qq com 是如何實現導航欄毛玻璃背景效果的?

時間 2021-05-12 06:00:10

1樓:黎博

canvas截了一張大圖,濾鏡處理(毛玻璃化),放在了header容器後面,尺寸與header容器一致,且header容器設定半透,漏出後面的截圖。

該canvas元素垂直座標與瀏覽器滾動同步,保證漏出的區域是頁面的背景。

原理很簡單,有些效果細節花了點心思調節。

1.截圖的時候,header先隱藏,否則最頂部的效果出不來。

2.當瀏覽器resize的時候,需要重新截圖。這裡處理暴力了點,直接刪掉濾鏡層,避免重複截圖的效能消耗。感興趣的,可以做一下函式節流來提公升resize時候重新截圖的效能。

3.根據最近WWDC,safari支援原生毛玻璃效果。http://caniuse.com/#

search=backdrop-filter。話說我們改網域名稱了,http://

2樓:

用了HTML5標準的rgba色,alpha通道值是0.8

下邊緣陰影

你是說這個陰影麼,這就是box-shadow啊,我都給你截圖了...

APEC 藍 是如何實現的?

我心碎的聲音 意義 APEC藍,是指2014年APEC會議期間北京藍藍的天空。2014年11月3日上午8點,北京市城六區PM2.5濃度為每立方公尺37微克,挨近一級優水平。戲稱天空的藍色為 APEC藍 出現的原因 1 中止汙染性工業活動 從2014年11月3 日開端,北京全市一切施工工地中止土石方 ...

iphone越獄是如何實現的?

如果你想破除系統本身的限制,則必須執行一段非系統預設的程式碼。於是問題是 如何讓系統執行一段非系統預設的程式碼。這就需要找乙個系統的漏洞。這種漏洞的原理很多,現列舉幾個 1 利用修改靜態儲存的方法 在系統未啟動,或者待處理的子系統未啟動時,利用外部的連線或其他漏洞,修改系統本身的程式,再到系統或子系...

電路是如何實現計算的?

ChouuW 簡單地說,電路只是實現了二進位制的 0 0 0 0 1 1 1 1 0 還有乙個進製 利用這個基礎就可以實現所有的運算。 Chant Zine 你的這乙個問題囊括了乙個微電子學生從大二到大四的起碼四門核心專業課 半導體物理,半導體器件原理,數字邏輯,積體電路設計。把這個問題解釋清楚基本...