毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介紹一個實現div毛玻璃背景的方法 CSS3 Filter CSS3的Filter主要用在圖像的特效處理上,預設值為none,還有以下備選項: 1.grayscale灰度 2.sepia褐色 ...
毛玻璃效果
ios里毛玻璃效果的使用非常多,本文介紹一個實現div毛玻璃背景的方法
CSS3 Filter
CSS3的Filter主要用在圖像的特效處理上,預設值為none,還有以下備選項:
1.grayscale灰度
2.sepia褐色
3.saturate飽和度
4.hue-rotate色相旋轉
5.invert反色
6.opacity透明度
7.brightness亮度
8.contrast對比度
9.blur模糊
10.drop-shadow陰影
每一種效果大家可以自己試試,考慮一下可以用在哪些方面,
這裡僅僅用到了其中的blur,幫助實現高斯模糊的效果。
相容性我試了一下最新的火狐和Chrome效果都是可以的,IE不用說了…
filter:blur()
參數預設是0,單位px,不接受%,參數值的大小表示屏幕上以多少像素融在一起, 所以值越大越模糊。
:before()
:before是css中的一種偽元素,可用於在某個元素之前插入某些內容。
用它來添加模糊背景,具體用法可以看我另外一篇?:before和:after
rgba()
毛玻璃背景上文字內容顯示效果並不理想,無論字體顏色深或淺,看著總是怪怪的…因此還需要加上一層帶色的半透明背景,一般是黑色,或白色。
示例:
整體通過三層重疊實現,
最下麵是模糊層.blur_box:before,設置z-index: -2。
中間是rgba層.rgba,設置z-index: -1。
最上面是內容層.blur_box,設置z-index: 0。
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毛玻璃效果</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.bg{
background:url(1.jpg) no-repeat center center fixed;/* 與下麵的blur_box:before中的background設置一樣 */
width:100%;
height:100%;
}
.blur_box{
z-index: 0;/* 為不影響內容顯示必須為最高層 */
position: relative;
overflow: hidden;
}
.blur_box:before{
content: "";/* 必須包括 */
position: absolute;/* 固定模糊層位置 */
width:300%;
height:300%;
left: -100%;/* 回調模糊層位置 */
top: -100%;/* 回調模糊層位置 */
background:url(1.jpg) no-repeat center center fixed;/* 與上面的bg中的background設置一樣 */
filter: blur(20px);/* 值越大越模糊 */
z-index: -2;/* 模糊層在最下麵 */
}
.rgba{
background-color: rgba(0, 0, 0, 0.2);/* 為文字更好顯示,將背景顏色加深 */
position: absolute;/* 固定半透明色層位置 */
width:100%;
height:100%;
z-index: -1;/* 中間是rgba半透明色層 */
}
.content_text{
text-align: center;
color: rgba(255, 255, 255, 0.8);
padding: 50px 30px;
line-height: 28px;
}
article{
width:40%;
height:300px;
margin:120px auto;
}
</style>
<body
<div class="bg">
<article class="blur_box">
<div class="rgba"></div><!-- 寫在這其實和blur_box:before效果相同,但已經設置過blur_box:before了 -->
<div class="content_text">
<h1>haha</h1>
<p>texttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttext</p>
</div>
</article>
</div>
</body>
</html>
註釋已經寫的很詳細了,但有一點還是得單獨說一下。因為blur()產生的模糊效果當值越大時,就會有越寬的邊緣漸變過渡,為了消除(實際上只是讓它看不見),我將模糊層的寬度和高度都變大,再通過top和left負值調整位置。
.blur_box:before{
content: "";
position: absolute;
width:300%;/* 模糊層的寬度和高度都變大 */
height:300%;
left: -100%;/* 回調模糊層位置 */
top: -100%;
background:url(1.jpg) no-repeat center center fixed;
filter: blur(20px);
z-index: -2;
}
其中.rgba也可改為白色半透明background-color: rgba(255,255,255,0.2);,完全取決於自己,然後相應改變內容的字色。blur()的參數也可以根據自己愛好試著改變出想要的效果。
http://hellopan.top/2017/10/31/%E5%AE%9E%E7%8E%B0div%E6%AF%9B%E7%8E%BB%E7%92%83%E8%83%8C%E6%99%AF/