毛玻璃效果

<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. CDH安装时，部分节点不受管控

    解决方案: /opt/cm-5.12.0/etc/init.d/cloudera-scm-agent stop cd /opt/cm-5.12.0/lib/cloudera-scm-agent/ rm ...

  2. vue基于element-ui的三级CheckBox复选框

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...

  3. [python] Pythonic语法笔记

    Pythonic语法笔记 __new__ 在类实例化之前执行的,也就是在init之前执行,可以为这个类写操作.接受的参数不是self而是cls.只有在new方法里返回类才会执行init操作,需要返回父 ...

  4. ThreadLocal 源码分析

    线程局部变量 ThreadLocal 用于实现线程隔离和类间变量共享. 创建实例 /** * 当前 ThreadLocal 实例的哈希值 */ private final int threadLoca ...

  5. Octavia 创建 loadbalancer 的实现与分析

    目录 文章目录 目录 从 Octavia API 看起 Octavia Controller Worker database_tasks.MapLoadbalancerToAmphora comput ...

  6. Jmeter之仅一次控制器

    在进行压测时,往往登录只需要一次,其他的接口需要循环测试.这里就会用到控制器中的仅一次控制器.只要放置在控制器的请求,不管在哪种情况下,都只执行一次. 1.名称:可以标识在该控制器下主要完成的 工作内 ...

  7. C#正则的使用

    c#使用正则表达式要用到System.Text.RegularExprssions命名空间 官方API Regex类是用于匹配表达式: 通常Regex分为静态类和实例化俩种方式.那这俩种有什么区别呢, ...

  8. Selenium学习之==>WebDriverApi接口详解

    浏览器操作 driver.back() # 后退 driver.forward() # 前进 driver.refresh() # 刷新 窗口操作 driver.get_window_size() # ...

  9. REST API (四)之Generic views

    通用的视图 Django’s generic views... were developed as a shortcut for common usage patterns... 它们采取一些常见的习 ...

  10. linux打包

    1.打成tar包 sudo tar -zcf boot.tar /boot/ 2.打成zip包 sudo zip -r boot.zip ./*