毛玻璃效果

<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. HDU1429--胜利大逃亡(续)（BFS+状态压缩）

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  2. Windows 下安装Apache web服务器

    1.Apache 服务器的下载 进入下载页面:http://httpd.apache.org/download.cgi 为提高下载速度,镜像选择清华大学的服务器(http://mirrors.tuna ...

  3. 基本的axios用法

    首先安装axios: 1):npm install 2):npm install vue-axios --save 3):npm install qs.js --save //它的作用是能把json格 ...

  4. 大哥带的MSsql注入（SQL Server）--预习

    ①判断数据库类型and exists (select * from sysobjects)--返回正常为mssql(也名sql server)and exists (select count(*) f ...

  5. python学习之路（22）

    使用模块 Python本身就内置了很多非常有用的模块,只要安装完毕,这些模块就可以立刻使用. 我们以内建的sys模块为例,编写一个hello的模块: #!/usr/bin/env python # - ...

  6. 搜索引擎算法研究专题六：HITS算法

    搜索引擎算法研究专题六:HITS算法 2017年12月19日 ⁄ 搜索技术 ⁄ 共 1240字 ⁄ 字号 小 中 大 ⁄ 评论关闭   HITS(Hyperlink-Induced Topic Sea ...

  7. __file__, sys._getframe().f_lineno 当前文件的行号

    当前文件的行号 try: f = open(sys.argv[1], "rb") address_book.ParseFromString(f.read()) f.close()e ...

  8. 1、maven的下载，安装，配置

    下载 1.maven官方下载地址: http://maven.apache.org/download.cgi 进入官网: 下载各历史版本官方地址: https://archive.apache.org ...

  9. 使用pycharm编写python乱码

    开始总是乱码,该设置的都设置了,后来用charde检测编码也一直报错,之后重启了pycharm就好了,乱码问题也没了

  10. vs2010 setup 打包 安装 BAT批处理实现自动安装软件功能

    CLS@echo offECHO.ECHO 安装 Diskeeper 7.0.428ECHO 请稍等...start /wait %systemdrive%\install\Applications\ ...