效果图：

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

      html,body {

        height: 100%;

        margin: 0px;

      }

      body {

        background-image: url(http://b-ssl.duitang.com/uploads/blog/201406/28/20140628160330_r2RsB.jpeg);

        background-attachment: fixed;

        background-position: center;

        background-size: cover;

        position: relative;

      }
　　　 // 核心css -- 依据父级容器的背景效果实现毛玻璃

      .wrap {

        width: 100%;

        height: 200px;

        position: relative;

        background: inherit;

        box-shadow: 0px 0px 8px #333;

        border-radius: 5px;

        z-index: 0;

      }
      // 模糊效果

      .wrap::before {

        content: '';

        position: absolute;

        top:0;

        right: 0;

        bottom: 0;

        left: 0;

        background: inherit;

        background-attachment: fixed;

        filter: blur(5px);

        z-index: -1;

      }
      // 增加透明度的白底 -- 非必要

      .wrap::after {

        content: '';

        position: absolute;

        top:0;

        right: 0;

        bottom: 0;

        left: 0;

        background: rgba(255,255,255,.35);

        z-index: -1;

      }

    </style>

  </head>

  <body>

    <div class="wrap">

      <span style="padding: 60px;display: inline-block;">玻璃模糊效果... ...</span>

    </div>

  </body>

</html>

CSS 毛玻璃效果的更多相关文章

  1. css毛玻璃效果

    毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感. 比如: 高大上啊,接下来肯定是眼馋手痒的过程... 当然,用ps搞一个全景毛玻璃背景毫无疑问是最省事的, ...

  2. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  3. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  4. CSS遮罩效果和毛玻璃效果

    前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...

  5. 《CSS揭秘》之毛玻璃效果知识点

    实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way ...

  6. CSS技巧收集——毛玻璃效果

    先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...

  7. css透明度、毛玻璃效果

    透明度: 1.opacity    背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2);   只是背景颜色透明,字体不透明 代码: .info{ backgr ...

  8. 实现一个成熟的底层毛玻璃效果（纯CSS）

    写在前面 毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)现提供一个代 ...

  9. css实现毛玻璃效果

    css实现毛玻璃效果,效果图 1,html代码 <div class="mainHolder"> <div class="textHolder" ...

随机推荐

  1. 安装SQL2012出现[HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD)设置为 1

    本人安装SQL2012出现这个错误,找了三天三夜,终于把问题找出来,共享给有需要的人们,不用重新换系统 错误如下: 1,此问题是系统.net Framework版本冲突,首先下载.net Framew ...

  2. StringTokenizer工具类的使用

    package stringtokenizer.java; import java.util.StringTokenizer; public class stringtokenizer { publi ...

  3. Android中StatFs获取系统/sdcard存储(剩余空间)大小

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  4. 3D Computer Grapihcs Using OpenGL - 13 优化矩阵

    上节说过矩阵是可以结合的,而且相乘是按照和应用顺序相反的顺序进行的.我们之前初始化translationMatrix和rotationMatrix的时候,第一个参数都是使用的一个初始矩阵 glm::m ...

  5. tomcat+nginx负载均衡

    一.       工具 nginx-1.8.0 apache-tomcat-6.0.33 二.    目标 实现高性能负载均衡的Tomcat集群: 三.    步骤 1.首先下载Nginx,要下载稳定 ...

  6. 图的深度优先搜索(DFS)和广度优先搜索(BFS)算法

    深度优先(DFS) 深度优先遍历,从初始访问结点出发,我们知道初始访问结点可能有多个邻接结点,深度优先遍历的策略就是首先访问第一个邻接结点,然后再以这个被访问的邻接结点作为初始结点,访问它的第一个邻接 ...

  7. idea中查看一个类的调用用和被调用用关系

  8. 在linux下搭建go环境

    这几天小Jerry开始接触Go语言了,因为小Jerry学个东西必须要从最基础的开始弄懂,不然~她理解不了<hahaha> 所以,今天就来讲最基础,却也很容易让小Jerry这样的菜鸟感到困扰 ...

  9. Oracle JET 单页面应用程序Router 使用（上）

    单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...

  10. tcpdump指定IP和端口抓包

    如下指定抓www.baidu.com 并且80端口的包 保存到test.cap 可以在Windows下面用wireshark打开 tcpdump 'port 80 and host www.baidu ...