css_毛玻璃

毛玻璃特效在日常的網頁中都是尋常可見的，其大概結構為三層：背景層+毛玻璃層+內容層。

下面寫一下自己試驗的毛玻璃特效：

1.首先在html文件上寫一個毛玻璃框架：

<div class="container"><!--該層主要用於設定毛玻璃位置以及對毛玻璃的溢出進行限制，即作為毛玻璃的容器-->
　　<div class="glass"></div><!--該層用於模糊化-->
　　<div class="content"><p>There are many kinds of way to be happy, but lonely is always similar. </p></div><!--該層是內容層-->
</div>

 

2.給body設置一個背景：

body{
　　background: url("../背景圖.jpg") no-repeat center top / cover fixed;
}

 

3.給毛玻璃容器設定位置及大小（此處設定其在頁面居中）：

.container{
　　width: 500px;
　　height: 200px;
　　position: absolute;
　　top: calc(50% - 100px);
　　left: calc(50% - 250px);
}

　　

4.給毛玻璃設定大小及背景：

.glass{
　　position: absolute;
　　top: 0;left: 0;right: 0;bottom: 0;
　　background: url("../背景圖.jpg") no-repeat center top / cover fixed;
　　filter: blur(20px);
}

　　

5.內容層的設定：

.content{
　　position: absolute;
　　top: 0;left: 0;right: 0;bottom: 0;
　　padding: 20px;
}

　　

效果：

 

 是不是覺得不盡人意？和平常網頁上見的棱角分明的毛玻璃並不相似？我們可以在效果中看到毛玻璃的邊界是模糊不清的，那么接下來我們設置毛玻璃容器的作用就體現出來了：

6.給毛玻璃設定外邊界令其延伸：

.glass{
　　position: absolute;
　　top: 0;left: 0;right: 0;bottom: 0;
　　background: url("../背景圖.jpg") no-repeat center top / cover fixed;
　　filter: blur(20px);
　　margin:-30px;
}

　　

7.給毛玻璃容器設定超出容器范圍的部分進行隱藏：

.container{
　　width: 500px;
　　height: 200px;
　　position: absolute;
　　top: calc(50% - 100px);
　　left: calc(50% - 250px);
　　overflow: hidden;
}

　　

效果：

以上就是制作毛玻璃的全部測試過程。

當元素之間出現重疊關系時：

在html文檔流中，子元素會顯示在父元素之上，兄弟元素之間，后一個元素會顯示在前一個元素（包括其子元素）之上（例如margin為負值）。

而對於脫離文檔流的元素，父元素脫離文檔流而子元素未脫離，子元素在父元素之上；

兄弟元素之間，前一個元素脫離而后一個元素未脫離，前一個元素在后一個元素之上；

后一個元素脫離而前一個元素未脫離，后一個元素在前一個元素之上；

兩者均脫離，后一個元素在前一個元素之上。

因此回過頭去看html文檔，content覆蓋在glass之上，而glass覆蓋在container之上，因此在這里即使不指定z-index也可以達到相應的層疊關系。

 

使用偽元素進行毛玻璃設置：

在這里我們做一個類似B站導航欄的毛玻璃效果：

 

1.首先在html上寫一個毛玻璃框架（這里使用偽元素作為毛玻璃層）：

<div class="banner"><!--作為背景層-->
　　<div class="banner_content"><!--作為內容層-->
　　　　<ul>
　　　　　　<li><a href="#">XX</a></li>
　　　　　　<li><a href="#">XX</a></li>
　　　　　　<li><a href="#">XX</a></li>
　　　　　　<li><a href="#">XX</a></li>
　　　　　　<li><a href="#">XX</a></li>
　　　　</ul>
　　</div>
</div>

　　

2.設置box-sizing（常規操作）：

*{
　　-webkit-box-sizing: border-box;
　　-moz-box-sizing: border-box;
　　box-sizing: border-box;
　　padding: 0;
　　margin: 0;
}

　　

3.設置背景層的位置及大小：

.banner{
　　position: absolute;
　　top: 0;left: 0;
　　width: 100%;
　　height: 120px;
}

　　

5.設置內容層的位置及大小：

.banner_content{
　　width: 100%;
　　height: 30px;
　　position: absolute;
　　top: 0;left: 0;
　　overflow: hidden;
}

　　

6.設置內容層的偽元素作為毛玻璃層：

.banner_content::before{
　　content: "";
　　position: absolute;
　　top: -10px;left: 0;bottom: 0;right: 0;
　　filter: blur(20px);
　　margin: -30px;
}

　　

7.對背景層與毛玻璃層設置背景圖片：

.banner,.banner_content::before{
　　background: url("../../背景圖.jpg") no-repeat center top / cover fixed;
}

　　

8.對列表的一些簡單設置，使其橫向排列：

.banner_content ul{
　　list-style: none;
　　width: 300px;
　　height: 30px;
　　line-height: 30px;
　　display: flex;
　　justify-content: space-between;
　　position: absolute;
　　top: 0;left: 100px;
}

　　

a{
　　text-decoration: none;
　　color: black;
}
a:hover{
　　color: white;
}

　　

效果：

由於此處設置ul的position為absolute，使得其從文檔流中被拖出來，在層疊關系上高於banner_content::before的毛玻璃層。（經測試取消ul元素的position設置，ul元素將會被毛玻璃層所覆蓋，原因是內容層中的ul元素未脫離文檔流，已脫離文檔流的毛玻璃層在層疊關系上高於已脫離文檔流的背景層，因此毛玻璃層將覆蓋掉內容層的子元素（這里可以將偽元素毛玻璃層理解為內容層的子元素，ul元素的兄弟元素））

如果內容層的子元素未脫離文檔流，那么設置背景層的z-index屬性為1；設置毛玻璃層的z-index屬性為-1也可達到該效果：

1.內容層：

.banner_content{
　　width: 100%;
　　height: 30px;
　　position: absolute;
　　top: 0;left: 0;
　　overflow: hidden;
　　z-index: 1;
}

　　

2.毛玻璃層：

.banner_content::before{
　　content: "";
　　position: absolute;
　　top: -10px;left: 0;bottom: 0;right: 0;
　　filter: blur(20px);
　　margin: -30px;
　　z-index: -1;
}

　　

3.內容層子元素：

.banner_content ul{
　　list-style: none;
　　width: 300px;
　　height: 30px;
　　line-height: 30px;
　　display: flex;
　　justify-content: space-between;
}
a{
　　text-decoration: none;
　　color: black;
}
a:hover{
　　color: white;
}

　　

效果：

以上內容均為手打，大概理解和描述上的錯誤較多，歡迎指正~