CSS遮罩效果和毛玻璃效果 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　本文將詳細介紹CSS遮罩效果和毛玻璃效果

遮罩效果

普通遮罩

　　一般地，處理全屏遮罩的方法是使用額外標簽

<style>
.overlay{
  position:fixed;
  top: 0;right: 0;left: 0;bottom: 0;
  background:rgba(0,0,0,0.8);
}
.lightbox{
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  margin:auto;
  z-index:1;
  width: 100px;
  height: 100px;
  background-color: white;
}
</style>
<div class="overlay"></div>
<div class="lightbox"></div>

　　效果如下

陰影遮罩

　　對于簡單的應用場景和產品原型來說，我們可以利用box-shadow來達到調暗背景的效果

box-shadow: 0 0 0 999px rgba(0,0,0,0.8);

　　這個初步的解決方案有一個明顯的問題，就是它無法在較大的屏幕分辨率(如>2000px)下正常工作。要么加大數字來緩解這個問題，要么換用視口單位來一勞永逸地解決它，只有這樣才能確保"遮罩層"總是可以覆蓋(至超出)視口

box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);

　　這個技巧非常簡潔易用，但它存在兩個非常嚴重的問題，從而制約了其使用場景

　　1、由于遮罩層的尺寸是與視口相關，而不是與頁面相關的，滾動頁面時，遮罩層的邊緣就露出來了，除非給它加上position：fixed這個樣式，或者頁面并沒有長到需要滾動的程度

　　2、這種效果無法防止用戶的鼠標與頁面的其他部分發生交互

<style>
.lightbox{
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  margin:auto;
  z-index:1;
  width: 100px;
  height: 100px;
  background-color: white;
  box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);
}
</style>
<div class="lightbox"></div>

模糊遮罩

　　把關鍵元素之外的一切都模糊掉，用來配合(或取代)陰影效果，這個效果的真實感更強，因為它營造出了"景深效果。視線聚焦在距離較近的物體上時，遠處的背景就是虛化的

filter:blur(5px);

　　下面是一個實例，鼠標移出彈出框時，模糊消失

毛玻璃效果

　　下面來逐步實現毛玻璃效果

半透明顏色

　　半透明顏色最初的使用場景之一就是作為背景。將其疊放在照片類或其他花哨的背層之上，可以減少對比度，確保文本的可讀性

　　下面是一個實例

<style>
.outer{
  position:relative;
  height: 200px;
  width: 200px;
   background: hsl(20,40%,90%);
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;
}
.inner{
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  font: bold 20px/1.5 '宋體';
  height: 160px;
  width: 180px;
  margin:auto;
  background:hsla(0,0%,100%,.3);
}
</style>
<div class="outer">
  <div class="inner">前端入門容易精通難，說的是前端，更指javascript</div>
</div>

【增大不透明度】

　　設置為30%的不透明度，文字難以看清。當然，可以通過提升不透明度來增加文本可讀性，但效果整個效果就沒有那么生動了

background:hsla(0,0%,100%,.6);

模糊處理

　　在傳統的平面設計中，通常把文本層所覆蓋的那部分圖片區域作模糊處理。模糊的背景看起來不那么花哨，因此在它之上的文本就相對比較易讀了。過去，由于模糊運算的性能消耗極其巨大，以致于這個技巧在網頁設計中鮮有用武之地。不過，隨著GPU的不斷進化以及硬件加速的不斷普及，眼下這個技巧已經逐漸流行起來

【父元素模糊】

　　如果直接對父元素設置模糊，則文本本身也會被模糊處理

<style>
.outer{
  position:relative;
  height: 200px;
  width: 200px;
   background: hsl(20,40%,90%);
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;
  filter:blur(5px);
}
.inner{
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  font:  20px/1.5 '宋體';
  height: 160px;
  width: 180px;
  margin:auto;
  background:hsla(0,0%,100%,.6);
}
</style>
<div class="outer">
  <div class="inner">前端入門容易精通難，說的是前端，更指javascript</div>
</div>

【偽元素模糊】

　　因此，對一個偽元素進行處理，然后將其定位到元素的下層

<style>
.outer{
  position:relative;
  height: 200px;
  width: 200px;
  z-index:1;
  background: hsl(20,40%,90%);
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;   
}
.inner:before{
  content:'';
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  filter:blur(5px);
  background: rgba(255,0,0,0.5);
  z-index:-1;
}
.inner{
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  font:  20px/1.5 '宋體';
  height: 160px;
  width: 180px;
  margin:auto;
  background:hsla(0,0%,100%,.3);
}
</style>
<div class="outer">
  <div class="inner">前端入門容易精通難，說的是前端，更指javascript</div>
</div>

背景復制

　　下面復制父級元素的背景來替換半透明的紅色。如果保證毛玻璃下的背景正好與父元素背景的圖案相吻合呢？使用fixed即可，將父元素和偽元素的背景設置為相同，且都相對于視口設置，可實現目標

<style>
.outer{
  position:relative;
  height: 200px;
  width: 200px;
  z-index:1;
  background: hsl(20,40%,90%) fixed;
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;   
}
.inner:before{
  content:'';
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  filter:blur(5px);
  background: hsl(20,40%,90%) fixed;
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;
  z-index:-1;
}
.inner{
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  font:  20px/1.5 '宋體';
  height: 160px;
  width: 180px;
  margin:auto;
  background:hsla(0,0%,100%,.3);
}
</style>
<div class="outer">
  <div class="inner">前端入門容易精通難，說的是前端，更指javascript</div>
</div>

　　效果如下

樣式封裝

　　毛玻璃樣式封裝如下

.frostedglass{
  width: 100px;  
  height: 100px;  
  font-size:16px;
  /*計算值為 height - width*top*2*/
  line-height: 70px;
  z-index:1;
  border-radius:50%;    
  position:relative;
  overflow: hidden;
  text-align:center;  
  background: hsl(20,40%,90%) fixed;
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;   
}
.frostedglass-inner:before{
  content:'';
  position:absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  filter:blur(5px);
  background: hsl(20,40%,90%) fixed;
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;
  z-index:-1;
}
.frostedglass-inner{
  position:absolute;
  top: 15%;right: 15%;left: 15%;bottom: 15%;
  background:hsla(0,0%,100%,.3);
}

　　下面是一個例子

<div class="frostedglass">
  <div class="frostedglass-inner">前端開發</div>
</div> 
<div class="frostedglass">
  <div class="frostedglass-inner">HTML</div>
</div>