毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。

比如：

高大上啊，接下来肯定是眼馋手痒的过程。。。

当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。

当然no no no了。

毛玻璃无疑就是种模糊了，少不了filter blur。

最终效果（chrome）：

天气预报

嗯，也算是将就了。。。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    </style>

</head>

<body>

    <div class='container'>

        <div class='frosted-glass'></div>

        <img class='weather' src='cloudy.png'>

    </div>

</body>

</html>

先搞一个div作为容器层，用来放置风景背景图。

内部放一个div，作为毛玻璃的主体。

再放一个img，显示天气图标。

容器层：

大小是图片大小，把风景图作为背景显示，no-repeat。这里用到一个小技巧，将background-attachment设成fixed，不随元素滚动，让子元素继承了本层的背景后，子元素就变成了一个viewport，移到哪儿就看到背景的哪儿。。。额。。。这句话理解起来有点困难，码农缺乏语言表达也是一大苦恼。。。

        .container{

            width: 287px;

            height: 285px;

            background-image: url(background.png);

            background-repeat: no-repeat;

            background-attachment: fixed;

            overflow: hidden;

        }

毛玻璃层：

这里的关键技巧就是background:inherit，直接使用了父元素的背景，和父级的background-attachment:fixed可完成从相机看世界的各种牛逼效果。

本文的的毛玻璃是全景，当然可以上半部或者下半部，或者其他位置，这就看出inherit和fixed牛逼的地方了。

        .frosted-glass{

            width: 287px;

            height: 285px;

            background: inherit;

            -webkit-filter: blur(5px);

            -moz-filter: blur(5px);

            -ms-filter: blur(5px);

            -o-filter: blur(5px);

            filter: blur(5px);

            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);

        }

上面的各种filter为了兼容各种浏览器版本，可度娘可谷歌，随便啦。

ie6~9的就用filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false)进行兼容。

ie8下的效果，继续将就吧。

最后就是天气图标：

需要把图标浮在最上层某个位置上，个人不太喜欢使用飞在天上的absolute来解决人间的俗世问题，元素内的定位用margin来作就足够了，虽然会在页面的回流上有影响，但不会产生足够的影响，好处就是父元素的位置和大小的变动产生后遗症会尽可能小，让absolute来弄，那就头大了，人间的问题就让人间的来解决吧。

图标的position设成relative，是为了让它浮在最上面，因为relative的要比默认static的显示层级高。

定位就用margin来做，当然前提是要把它弄成block级元素，否则就然并卵了。

        .weather{

            width:80px;

            height:80px;

            margin-top: -200px;

            margin-left: 100px;

            position: relative;

            display: block;

        }

至此完成基本效果。

代码和资源：

戳

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

  1. CSS 毛玻璃效果

    效果图: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <met ...

  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. for循环中的 else，break

  2. 学习笔记：java并发编程学习之初识Concurrent

    一.初识Concurrent 第一次看见concurrent的使用是在同事写的一个抽取系统代码里,当时这部分代码没有完成,有许多的问题,另一个同事接手了这部分代码的功能开发,由于他没有多线程开发的经验 ...

  3. 在 Windows 上安装Rabbit MQ 指南

    rabbitMQ是一个在AMQP协议标准基础上完整的,可服用的企业消息系统.他遵循Mozilla Public License开源协议.采用 Erlang 实现的工业级的消息队列(MQ)服务器. Ra ...

  4. 初试Office 365企业版E3

    Microsoft Office 365 团队给了所有现任的MVP 12个月的微软 Office 365 企业 E3 订阅,今天激活账号并试用了一下,发现非常强大,本文简要介绍下Office 365 ...

  5. 简化 Web 应用程序与 Windows Azure Active Directory、ASP.NET 和 Visual Studio 的集成

    大家好! 今天的博文深入讨论我们今天推出的开发人员工具和框架中的一些新功能.我们通过与 ASP.NET 和 Visual Studio 团队合作开发了一些重大的增强功能,让开发人员能够轻松使用 Win ...

  6. ABP理论学习之功能管理

    返回总目录 本篇目录 介绍 功能类型 定义功能 检查功能 功能管理者 版本说明 介绍 大多数的Saas(多租户)应用都有不同 功能的 版本(包).因此,他们可以给租户(客户)提供不同的 价格和功能选项 ...

  7. iOS开发系列--Objective-C之协议、代码块、分类

    概述 ObjC的语法主要基于smalltalk进行设计的,除了提供常规的面向对象特性外,还增加了很多其他特性,这一节将重点介绍ObjC中一些常用的语法特性.当然这些内容虽然和其他高级语言命名不一样,但 ...

  8. CoreData教程

    网上关于CoreData的教程能搜到不少,但很多都是点到即止,真正实用的部分都没有讲到,而基本不需要的地方又讲了太多,所以我打算根据我的使用情况写这么一篇实用教程.内容将包括:创建entity.创建r ...

  9. Python学习笔记

    1. 进行浮点数运算时,整数要写成浮点数形式,否则Python默认按照整数进行运算了,譬如3/5应该写成3.0/5.0: 2. Python没有switch: 3. Python中没有重载,但是可以通 ...

  10. Android开发学习之路-Android Studio真神器！

    放假之后电脑配置升级就开始用Android Studio(下面简称AS)了,那个酸爽真的不是一般的啊,这里开一篇博客来记录下AS里面各种酷炫的功能,有更好玩的,大家不要吝啬,评论告诉我吧! 最近And ...