蘋果導航條的高斯模糊效果（css）

今天接到乙個需求，實現乙個高斯模糊半透明的效果，以前沒有寫過這種效果，今天實現了，做乙個記錄

這個是給出的設計稿

可以看到，在免費預約門店的位置，滑動下來的文案，是乙個毛玻璃效果，底部的綠色是固定的

// 底部容器

.btn-bottom

這個時候，再複習一遍backdrop-filter的屬性有那些

// 模糊的半徑，數值越大越模糊

backdrop-filter:
blur
(2px)
;// 輸出的亮度，越大越亮，比如 brightness(200%) => 輸出亮度為2倍值
backdrop-filter:
brightness(60
%);// 輸出的對比度，越大越強烈
backdrop-filter:
contrast(40
%);// 輸出的陰影，類似css的box-show屬性
backdrop-filter: drop-
shadow
(4px 4px 10px blue)
;// 輸出的灰度，0% => 100% 的效果類似於 黑白照 => 彩色照
backdrop-filter:
grayscale(30
%);// 輸出的色相變化
backdrop-filter: hue-
rotate
(120deg)
;// 輸出轉換量（這個沒怎麼懂，估計以後用的不多）
backdrop-filter:
invert(70
%);// 不透明度，但是會被子級繼承，可能會影響到子級的不透明度
backdrop-filter:
opacity(20
%);// 這個也是轉換量
backdrop-filter:
sepia(90
%);// 輸出的飽和度
backdrop-filter:
saturate(80%);

導航條吸頂效果

doctype html html head meta charset utf 8 title title head body div class portalheaderlink id n a 我要開店 a a 我要做 a a 登入 a div p 1 p p 1 p p 1 p p 1 p p ...

模擬嗶哩嗶哩導航條模糊效果

首先，它的導航條是這樣子的 以下是我模仿實現的導航條 要達到這個效果，需要明白實現的思路 1 首先，導航條下面有一張，它們不在同一層，將導航條設定為position absolute 可以實現。2 其次，導航條需要時透明的，這樣才能看見下面。需要乙個opcity或者在設定background col...

模擬嗶哩嗶哩導航條模糊效果

首先，它的導航條是這樣子的 以下是我模仿實現的導航條 要達到這個效果，需要明白實現的思路 1 首先，導航條下面有一張，它們不在同一層，將導航條設定為position absolute 可以實現。2 其次，導航條需要時透明的，這樣才能看見下面。需要乙個opcity或者在設定background col...