CSS毛玻璃效果如何实现_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 08:46:58
原创
1346人浏览过

毛玻璃效果就是底层模糊,面层清晰的那种

毛玻璃效果

这是html源文件

< !DOCTYPE html>  <html>  <head>      <meta charset="utf-8"/> </head>  <body>      <div class='container'>          <div class='frosted-glass'></div>          @@##@@      </div>  </body>  </html> 
登录后复制

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

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

立即学习前端免费学习笔记(深入)”;

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

其实就是三层镶嵌。

容器层

.container{          width: 287px;    //设置好容器层的大小,宽和高,这样就先固定了这个容器层,       height: 285px;          background-image: url(background.png);    //填充一个背景图,这个背景图的大小要跟容器的宽高是一样的,因为设置了no-repeat,所以如果太小就会出现填充不满                                                //当然可以设置background-size:100% 100%之类       background-repeat: no-repeat;          background-attachment: fixed;     //设置这个的原因主要是为了将背景图固定好,这个固定是相对浏览器而言,所以直接的效果就是相对于用户来说,滚动浏览器也能看到背景图                                        //但这个并不作为毛玻璃效果显示的技术点。       overflow: hidden;      } 
登录后复制
  1. background-attachment: fixed; 当页面的其余部分滚动时,背景图像不会移动。
  2. background-repeat: no-repeat; 把背景图设置为不重复
  3. 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);   //兼容ie    }   
登录后复制
  1. background: inherit; 继承父元素的背景
  2. 毛玻璃的关键点在于 filter:blur ,filter是滤镜的意思,滤镜有很多种,能够像给照片加滤镜效果一样直接加。

    ``` Alpha:设置透明层次  blur:创建高速度移动效果,即模糊效果  Chroma:制作专用颜色透明  DropShadow:创建对象的固定影子  FlipH:创建水平镜像图片  FlipV:创建垂直镜像图片  glow:加光辉在附近对象的边外  gray:把图片灰度化  invert:反色  light:创建光源在对象上  mask:创建透明掩膜在对象上  shadow:创建偏移固定影子  wave:波纹效果  Xray:使对象变得像被x光照射一样```
    登录后复制

图标层

把背景模糊了,是为了凸显出某些东西,这个图标层就是泛指这些要凸显的东西

 .weather{        width:80px;        height:80px;        margin-top: -200px;        margin-left: 100px;        position: relative;   //这里用相对布局,通过margin来调整位置,这样主要是为了更方便的跟随容器层一起移动或者显示。                          //并且图标的position设成relative,是为了让它浮在最上面,因为relative的要比默认static的显示层级高。     display: block;     }
登录后复制

参考: http://www.jb51.net/css/412009.html

CSS毛玻璃效果如何实现_html/css_WEB-ITnose
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号