其實就是用兩個圖片拉

我是效果圖

這里是代碼

?

1.body內容

<div class="div-background"><div class="div-shadow"><div class="glass"></div><div class="glass-txt">:o 原來我是一塊玻璃</div></div> </div>

2.css樣式

body, html {height: 100%;margin: 0;padding: 0;overflow-x: hidden;}*, *:before, *:after {box-sizing: border-box;}.div-background{height: 100%;width: 100%;background-image: url("https://w.wallhaven.cc/full/pk/wallhaven-pkkm6p.png");background-size: cover;background-position: center;}.glass { /*插入圖片設置濾鏡并且定位到中間*/height: 100%;width: 100%;background-image: url("https://w.wallhaven.cc/full/pk/wallhaven-pkkm6p.png");background-size: cover;background-position: center;filter: blur(20px); /*模糊濾鏡*/clip-path: inset(20%); /*切割20%*/}.div-shadow {height: 100%;width: 100%;filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));display: flex;justify-content: center;}.glass-txt{position: absolute;font-size: 40px;color: white;top: 50%;transform: translate(0, -50%);}

? ? ? ?就是這樣

其實是相同的兩個圖片其中一個模糊掉

然后再把他切成方塊就可以了:l

?

總結

以上是生活随笔為你收集整理的CSS filter-仿磨砂玻璃效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。