這篇文章為大家帶來了關於CSS的相關知識，其中主要介紹了我因為好奇，get了一個新的CSS知識，什麼東西讓我好奇呢？有興趣的朋友，下面一起來看看吧，可能你也會很好奇，哈哈。
大家在查閱Element UI文件的時候，是否發現下面這個效果
好傢伙，這個效果該怎麼實現呢？我的想法是設置背景圖為白色和透明相間，這樣底下的圖片就能穿透部分上來，形成一個類似毛玻璃的效果。話不多說，咱們一起來寫代碼試試能否實現：
.header {
position: fixed;
top: 0;
width: 100%;
height: 400px;
background-image: radial-gradient(transparent 50px, #fff 50px);
background-size: 200px 200px;
background-color: yellow;
}
#這邊使用的是徑向漸變的方式，給背景設定一個中間透明，四周白色的背景，可能以上程式碼並不能很好體現這個背景如何生效的，我們來看看下面這個：
.header {
position: fixed;
top: 0;
width: 100%;
height: 400px;
background-image: radial-gradient(transparent 50px, #fff 50px);
background-size: 200px 200px;
background-color: yellow;
+ background-repeat: no-repeat;
}
懂了吧？就是一個這種的小方塊平鋪形成的。假如我們的背景色不設置，那麼這就是鏤空的背景。
我們可以看到我們的小圓孔是很均勻排列開的，假如我改一下背景的尺寸，效果如下：
.header {
position: fixed;
top: 0;
width: 100%;
height: 400px;
background-image: radial-gradient(transparent 50px, #fff 50px);
background-size: 120px 120px;
background-color: yellow;
/* background-repeat: no-repeat; */
}
可以看到，圓孔變得密集了，那麼背景尺寸調到多少會變成完全透明呢？我口算了一下，應該是50根2，也就是大概71px。試試？
.header {
position: fixed;
top: 0;
width: 100%;
height: 400px;
background-image: radial-gradient(transparent 50px, #fff 50px);
background-size: 71px 71px;
background-color: yellow;
/* background-repeat: no-repeat; */
}
為了看的更清楚，我們將原本的白色改成黑色，並且把71px改成72px:
#出現黑色點點了！說明我算的不錯，一點不差，我真棒！ ok，咱們繼續探索
我們現在要對標Element 官網那樣的效果，我做了下面的例子：
.header {
position: fixed;
top: 0;
width: 100%;
height: 400px;
background-image: radial-gradient(transparent 10px, #fff 10px);
background-size: 40px 40px;
}
.container {
padding-top: 400px;
height: 200vh;
}
.circle {
width: 100%;
height: 200px;
border-radius: 25px;
background-color: red;
}
#修改下尺寸：
background-image: radial-gradient(transparent 1px, #fff 1px); background-size: 4px 4px;
至此，這個效果就基本做好了，但是還是有差別，人家的有毛毛的效果，我的沒有。不行，得學習下人家是怎麼做的！
程式碼如下：
.navbar-wrapper {
position: relative;
border-bottom: 1px solid var(--border-color);
height: var(--header-height);
padding: 0 12px 0 24px;
background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);
-webkit-backdrop-filter: saturate(50%) blur(4px);
top: 0;
}歐？ backdrop-filter這個是什麼，以前沒用過耶，試試看。這裡有兩個屬性，第一個有點陌生，第二個應該是設定毛玻璃效果的虛化吧，先試咱們會的：
確實有虛化效果。那saturate又是幹嘛的呢？試試就知道了：
唔，變暗了呢
查了下英文意思是使濕透的意思，emmmm,好像紅色的衣服濕了確實就變成暗紅了，有點意思。這邊有個百分比的設置，試試看效果：
我們將百分比設定為10%：
完全黑了，紅黑了，那濕的透透的了，哈哈哈~
ok，今天分享就到這，覺得有意思的朋友們記得點讚關注加收藏，因為今天你們學會了一個單字： saturate:濕透了。 sa(濕)tu(透)rate(了) ？ ？ ？ ？ ？ ？ ？ ？ ？ ？
推薦學習：《css影片教學》
以上是'saturate”，又get了新的CSS知識！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
