毛玻璃效果

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毛玻璃背景的更多相关文章

  1. 滚动时div的背景图片随之滚动

    在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动,如下: 当滚动时内容位置保持不变,但是内容后面的背景却在随着滚动.随之我通过审查元素看到了其是通过background-pos ...

  2. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  3. div+css背景渐变色代码示例

    用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器. 从黄到红示例:http://keleyi.com/keleyi/phtml/divcss/2.htm 代码: <style ty ...

  4. CSS实现DIV层背景透明而文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  5. 给div加上背景图片

    <div class="panel-body" style="background:url('pages/upload/brief/img/bg.jpg');bac ...

  6. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  7. 鼠标点击DIV后,DIV的背景变色(js)

    <!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...

  8. 利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【CSS】div的背景图完整图片覆盖

    最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...

随机推荐

  1. [luoguP1005] 矩阵取数游戏(DP + 高精度)

    传送门 和奶牛那个题很像,每一行状态互不影响,也就是求 n 遍DP 不过高精度非常恶心,第一次写,调了我一上午. ——代码 #include <cstdio> #include <c ...

  2. 438D - The Child and Sequence

    D. The Child and Sequence time limit per test 4 seconds memory limit per test 256 megabytes input st ...

  3. Code(poj 17801)

    求出一个长度为10^n+n-1的序列,其中包含了所有的n位数(一共10^n个数,从00000(n个0)~10^n-1) /* 典型的欧拉回路题目 对于n=4为密码想要序列最短 那么 1234 234? ...

  4. 交友app

    编辑注记:这是由译者 han_qi 翻译纽约客的一篇文章,从女性的角度描写了交友产品的用户体验及需求,值得广大产品经理深入研究,文章略长,但值得深读.原文<Overwhelmed and Cre ...

  5. Contemplation! Algebra 矩阵快速幂

    Given the value of a+b and ab you will have to find the value of a n + b n Input The input file cont ...

  6. 武大OJ 612. Catch the sheep

    Description Old Sama is a great and powerful magician in the word. One day, a little girl, Anny, tou ...

  7. 中文命名之Hibernate 5演示 - 使用注解(annotation)而非xml定义映射

    前文中文编程:中文命名之Hibernate 4+MySQL演示最后留下了个Hibernate 5之后出现的问题, 于是在Hibernate社区提交了报告: Seemingly regression s ...

  8. Ubuntu 16.04下没有“用户和组”功能的问题解决

    在16.04以前的版本会自带“用户和组”的功能,但是在16.04发现系统只自带了“用户账户”的功能. 问题解决: 1.安装gnome-system-tools sudo apt-get install ...

  9. ubuntu 安装 swift

    第一步 安装mysql和mysql的python支持 apt-get install python-mysqldb mysql-server 第二步 配置mysql vim /etc/mysql/my ...

  10. 从理论到实践,全方位认识DNS(实践篇)

    在理论篇中,我们基本了解了DNS的整个协议原理,但是可能还会有着下面的疑问: 为什么我想申请的域名都没了? DNS 域名还要备案,这是为什么啊? 如何将刚申请的域名绑定到自己的网站呢? 怎么才能看到那 ...