实现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()的参数也可以根据自己爱好试着改变出想要的效果。
http://hellopan.top/2017/10/31/实现div毛玻璃背景/
实现div毛玻璃背景的更多相关文章
- 滚动时div的背景图片随之滚动
在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动,如下: 当滚动时内容位置保持不变,但是内容后面的背景却在随着滚动.随之我通过审查元素看到了其是通过background-pos ...
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...
- div+css背景渐变色代码示例
用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器. 从黄到红示例:http://keleyi.com/keleyi/phtml/divcss/2.htm 代码: <style ty ...
- CSS实现DIV层背景透明而文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- 给div加上背景图片
<div class="panel-body" style="background:url('pages/upload/brief/img/bg.jpg');bac ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- 鼠标点击DIV后,DIV的背景变色(js)
<!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...
- 利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【CSS】div的背景图完整图片覆盖
最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...
随机推荐
- Apache 流框架 Flink,Spark Streaming,Storm对比分析(2)
此文已由作者岳猛授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 2.Spark Streaming架构及特性分析 2.1 基本架构 基于是spark core的spark s ...
- openstack windows2012r2 glance镜像制作
镜像实现: 密码注入 修改密码 根分区扩展 1.下载windows iso镜像 下载地址:http://imsdn.com/MSDN-1.html 例如:cn_windows_server_2012_ ...
- CodeForcesGym 100753F Divisions
Divisions Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForcesGym. Or ...
- chrome源代码目录结构简介(版本4.1.249.1059)
为了对庞大的源码项目进行分析,先对源码目录树作一个简单的介绍,粗略的了解一下各个模块的功能分布情况,chrome源代码src目录下的结构如下图: app:该目录下的代码主要是和各个操作系统平台相关的应 ...
- windows下如何正确使用Jconsole远程连接linux主机上的JVM
https://www.aliyun.com/jiaocheng/589230.html
- Thread的方法join()使用
join()的作用:Waits for this thread to die.等待线程对象销毁.在Thread源码中可以看到join源码是使用了wait()方法来实现等待功能. 因为join()内部使 ...
- CODEVS——T 1700 施工方案第二季
http://codevs.cn/problem/1700/ 2012年市队选拔赛北京 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 ...
- installshield中的installscript编程
上一篇说道了InstallShield高速建立一个打包程序,如今说说InstallShield里面的installscript脚本. 该文属于个人理解.參考一些相关文章. 相关资料下载地址:http: ...
- HTTPS那些事 用java实现HTTPS工作原理
HTTPS那些事 用java实现HTTPS工作原理 博客分类: java历险 今天被问到关于https原理的问题,结果由于知识掌握不牢靠,停留于表面,很多细节都无法回答清楚,于是决定把https的 ...
- mac 显示隐藏文件的命令行和快捷键
命令行方式: 显示隐藏文件: defaults write com.apple.Finder AppleShowAllFiles YES;KillAll Finder 不显示隐藏文件: default ...