毛玻璃效果

<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. 解决kaggle邮箱验证不能confirm的问题

    感谢这位博主 https://blog.csdn.net/FrankieHello/article/details/78230533

  2. linq/EF 使用技巧笔记

    先上图 1.linq列转行(如图从上到下,action_type即power字段),其实严格意义上来说,并不是linq,只是用了循环 List<NavigationDto> leaf = ...

  3. HDU3465--Life is a Line（树状数组求逆序数，离散化）

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Submission(s ...

  4. 接口自动化request库入门

    requests库7个主要方法 r= requsts.get(),主要属性: r.raise_for_status()方法内部判断r.status_code是否等于200不需要增加额外的if语句,该语 ...

  5. Jmeter -- 参数化（函数助手和CSV数据文件配置）

    使用场景: 例如:模拟多用户登陆时 参数化两种方式: 方式一:使用函数助手 1. 创建包含多个登录名和密码的文件 可以在文本编辑器中输入,格式如下: username,passwordusername ...

  6. 大哥带我们的mysql注入

    这是今天的任务 任务三个 : 第一个手工注入找出admin用户的密码,第二个读取我phpstudy中mysql的my.ini这个配置文件的内容,第三个是通过这个注入点写入一个webshell,  都是 ...

  7. the path component: '/var' is world-writable

    java.io.IOException: the path component: '/var' is world-writable.  Its permissions are 0666.  Pleas ...

  8. Oracle开发：normal ，sysdba，sysoper区别

    Oracle将用户分成两类:[system]和[sys] [system]用户只能用normal身份登陆em.(可以看成公司的普通成员) [sys]用户具有“SYSDBA”(可以看成公司的CEO)或者 ...

  9. legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解（Vagrant + Homestead）

    legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead) 一.总结 一句话总结: 1.安装的话就是下载好git,va ...

  10. hg(Mercurial)使用参考

    hg(Mercurial)使用参考   使用hg(mercurial)有好几个月了,个人感觉这款分布式的版本控制系统非常不错,易学,易用:你可以从做在你旁边的同事拉取完整的代码; 对网络的依赖性更低, ...