效果图：

<!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. python4---打印长方形

    1:方法1for i in range(6): for j in range(3): print("*", end=" ") print() 2:输入显示长方形 ...

  2. Redis实战（十四）Redis实现Session共享

    序言 登录的处理流程: 1.登录页面提交用户名密码. 2.登录成功后生成token.Token相当于原来的jsessionid,字符串,可以使用uuid. 3.把用户信息保存到redis.Key就是t ...

  3. css了解一下!!!

    css简介 css(cascading style sheet,层叠样式表):为了让网页的内容核样式拆分开; 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染); css语法 cs ...

  4. 【BZOJ1098】办公楼biu（补图，bfs，链表）

    题意:有n个点m条边,要求将点尽可能多的分成若干个部分,使得若两个点不在同一个部分则他们之间必定有边 n<=1e5,m<=2e6 思路:From https://blog.csdn.net ...

  5. Linux root用户密码重置，远程登陆，文件基本属性

    Linux root用户密码重置,远程登陆,文件基本属性 忘记Linux系统的root密码,linux系统忘记root密码的情况该怎么办呢?重新安装系统吗?当然不用!进入单用户模式更改一下root密码 ...

  6. Java数据结构之排序---选择排序

    简单选择排序的介绍: 从给定的序列中,按照指定的规则选出某一个元素,再根据规定交换位置后达到有序的目的. 简单选择排序的基本思想: 假定我们的数组为int [] arr = new int[n],第一 ...

  7. 在MyEclipse安装Spket插件，用于jQuery代码提示

    Spket插件下载: https://pan.baidu.com/s/1sjz24NF 解压文件,然后将解压后的文件全部复制到MyEclipse安装目录下的dropins包中,重启MyEclipse. ...

  8. 大哥带的Orchel数据库的盲注入bool型

    0X01判断闭合 ?username=SMITH' 错误 ?username=SMITH'' 正确 ?username=SMITH' and ascii(substr((select user fro ...

  9. 【Python】学习笔记三：序列

    sequence(序列) sequence(序列)是一组有序的元素的集合,序列可以有任何元素,也可以没有元素 元组与表的区别:一旦建立,tuple的各个元素不可再变更,而list的各个元素可以再变更 ...

  10. 密度聚类 DBSCAN

    刘建平:DBSCAN密度聚类算法 https://www.cnblogs.com/pinard/p/6208966.html API 的说明: https://www.jianshu.com/p/b0 ...