原文在我的博客☞实现div毛玻璃背景
毛玻璃效果
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>
*{