磨砂玻璃效果已經在互聯網上流行了很多年，Mac OS以其磨砂玻璃效果而聞名，Windows 10也通過其他一些燈光，深度，運動，材質，比例尺實現了磨砂玻璃的效果

在CSS中使用磨砂玻璃效果時，我們中的一些人知道該怎么做，而其他人仍會在百度搜索：

怎么做？？

“ css光澤效果”
“ css毛玻璃”
“透明模糊背景css”
“毛玻璃效果photoshop”
“僅cs模糊背景”
“ css玻璃窗格”
“ css背景濾鏡”
“ css模糊覆蓋物”
“ css div后面的模糊背景”

今天，我將展示僅CSS的一種方法，教你可以使用該方法在CSS中進行磨砂玻璃效果。

1，創建一個HTML標記

為簡單起見，我將向你展示如何在空的div上制作磨砂玻璃效果。因此，HTML中所需的只是一個空的div。

<div> </div>

2.重置瀏覽器默認樣式

*{margin: 0;padding: 0; }

3.添加背景圖片

我們需要我們的背景占據頁面的整個寬度和高度，并且我們不想重復我們的背景，我們也希望我們的背景是固定的。我們希望背景是固定的，因為我們不希望以后在繼承背景時將整個背景顯示在div中。

body{background-image: url(http://bit.ly/2gPLxZ4); //add "" if you wantbackground-repeat: no-repeat;background-attachment: fixed;background-size: cover; }

4.現在給Div一些樣式

現在，我們將使用背景繼承為div設置一些寬度和高度。我們還需要確定絕對位置，以確保疊加層不會占用網頁的整個寬度和高度

div{background: inherit;width: 250px;height: 350px;position: absolute; }

5，固定和不固定附件的示例

?

?

現在，我們知道在固定了背景附件的情況下，我們只能看到div后面的div內部的背景圖像區域，而這正是我們希望毛玻璃效果起作用的地方

6，現在我們需要創建一個覆蓋層

我們需要content: “”確保之前的偽類能夠正常工作。我們還從其父級繼承了背景，并且我們使用絕對位置將其在其父元素DIV中對齊。我們正在使用盒子陰影添加白色透明疊加層，并且正在使用模糊來模糊該疊加層。

div:before{content: “ ”;background: inherit; position: absolute;left: 0;right: 0;top: 0; bottom: 0;box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);filter: blur(10px); }

?

7，修復DIV的不模糊邊緣

現在，我們需要修復div的未模糊邊緣，為此，我們需要增加疊加層的尺寸，使其比其父尺寸稍高一些，然后將其上下位置設為負（-25）。我們還需要給它的父對象提供隱藏的溢出，以確保父DIV之外的任何覆蓋都不會顯示并被隱藏。

div{background: inherit;width: 250px;height: 350px;position: absolute;overflow: hidden; //adding overflow hidden } div:before{content: ‘’;width: 300px;height: 400px;background: inherit; position: absolute;left: -25px; //giving minus -25px left positionright: 0;top: -25px; //giving minus -25px top position bottom: 0;box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);filter: blur(10px); }

?

到這里，我們就實現了CSS的磨砂玻璃效果

你還可以使用CSS屬性“backdrop-filter: blur(20px)”來實現此效果，該屬性在工作方面要容易得多，并且是更好的選擇，但兼容性還不是很強。

總結

以上是生活随笔為你收集整理的纯CSS教你实现磨砂玻璃背景效果（附代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

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