毛玻璃效果

<style>

        .container{

            width: 287px;

            height: 285px;

            background-image: url(img/background.png);

            background-repeat: no-repeat;

            background-attachment: fixed;

            overflow: hidden;

        }

        .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);

        }

        .weather{

            width:80px;

            height:80px;

            margin-top: -200px;

            margin-left: 100px;

            position: relative;

            display: block;

        }

</style>

<body>

    <div class='container'>

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

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

    </div>

</body>

大神链接：https://www.cnblogs.com/kongxianghai/p/5059966.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. css实现毛玻璃效果

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

  9. CSS 奇思妙想 | 全兼容的毛玻璃效果

    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...

随机推荐

  1. Spring Cloud Stream教程（五）编程模型

    本节介绍Spring Cloud Stream的编程模型.Spring Cloud Stream提供了许多预定义的注释,用于声明绑定的输入和输出通道,以及如何收听频道. 声明和绑定频道 触发绑定@En ...

  2. python正则之match search findall

    match:只匹配一次,开头匹配不上,则不继续匹配 a,b,\w+ match(a,"abcdef") 匹配a >>> re.match("a" ...

  3. html上传文件

    不太懂Html 做备用 html的文件上传分两个 第一个是Html文件 浏览器加载用的 另一个是PHP文件 处理上传文件的 下面是Html文件 叫index.html <html> < ...

  4. P1309 瑞士轮 （吸氧了）

    P1309 瑞士轮 题解 1.这题可以模拟一下 2.sort吸氧可以过(可能是排序有点慢吧,不开会T) sort排序时注意: return 1 是满足条件,不交换 return 0是不满足,交换 代码 ...

  5. 通过helm 安装 harbor 不成功问题处理

    helm 安装 harbor 安装不成功处理过程 通过安装脚本 helm install c7n/harbor \ --set expose.ingress.hosts.core=harbor.ls. ...

  6. java 8 jdk1.8 新特性

    1Lambda表达式 2函数式接口 函数式接口(Functional Interface)就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口. java 8为函数式接口引入了一个新注解@Fu ...

  7. 后台以json数据形式返回之后前台接受的方法以及之后的解析总结

    1.前台AJAX请求,后台以对象转JSON形式返回: 后台代码: @RequestMapping(value = "/queryDist", method = RequestMet ...

  8. 阶段3 1.Mybatis_02.Mybatis入门案例_2.mybatis入门案例中的设计模式分析

    读取配合文件 创建工厂 最终图

  9. 5.1.k8s.ConfigMap

    ConfigMap #ConfigMap用于保存配置数据的键值对,可用来保存单个属性,或配置文件 #ConfigMap创建 #使用yaml文件创建ConfigMap #cm-demo.yaml kin ...

  10. 【Linux 应用编程】进程管理 - 进程间通信IPC之共享内存 mmap

    IPC(InterProcess Communication,进程间通信)是进程中的重要概念.Linux 进程之间常用的通信方式有: 文件:简单,低效,需要代码控制同步 管道:使用简单,默认阻塞 匿名 ...