实现div毛玻璃背景
来源:互联网 发布:dubstep软件下载 编辑:程序博客网 时间:2024/06/11 19:41
原文在我的博客☞实现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>*{ 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()
的参数也可以根据自己爱好试着改变出想要的效果。
- 实现div毛玻璃背景
- 实现div毛玻璃背景
- android毛玻璃背景简单实现
- android 毛玻璃模糊效果背景实现
- css实现div层透明毛玻璃
- android 中毛玻璃效果(背景虚化)的实现
- android 中毛玻璃效果(背景虚化)的实现
- android--毛玻璃效果(背景虚化)的实现
- android 中毛玻璃效果(背景虚化)的实现
- Android毛玻璃背景效果
- Activity背景毛玻璃
- HTML毛玻璃背景
- Activity毛玻璃背景效果
- div渐变背景的实现
- div+css实现背景透明
- CSS3设置背景毛玻璃效果
- Swift - 实现毛玻璃效果(Blur、模糊、虚化背景元素)
- CSS+DIV实现鼠标经过背景变色
- SpringMVC的拦截器和过滤器的区别与联系
- 程序人生
- 阶段的练习(易错点)
- Android LayoutInflater.inflate的原理
- String、StringBuffer与StringBuilder的区别。
- 实现div毛玻璃背景
- 洛谷 1260 工程规划 差分约束 解题报告
- 海航并购新加坡物流企业CWT获各界高度认可
- websocket通信
- Java进阶(三)多线程开发关键技术
- 物联网产业的标准应该谁来制定?
- 欢迎使用CSDN-markdown编辑器
- TP5下导出exl封装的类
- html常用标签介绍