CSS毛玻璃效果如何实现_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:46 AM

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

毛玻璃效果

这是html源文件

< !DOCTYPE html>  <html>  <head>      <meta charset="utf-8"/> </head>  <body>      <div class='container'>          <div class='frosted-glass'></div>          <img  class='weather' src='cloudy.png'/ alt="CSS毛玻璃效果如何实现_html/css_WEB-ITnose" >      </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;      }

background-attachment: fixed; 当页面的其余部分滚动时，背景图像不会移动。
background-repeat: no-repeat; 把背景图设置为不重复
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    }

background: inherit; 继承父元素的背景

毛玻璃的关键点在于 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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

什么是自我关闭标签？举一个例子。Apr 27, 2025 am 12:04 AM

self-closingtagsinhtmlandxmlaretagsthatclosethem hexpthementneedingAseparateCloseTag，SightifyingmarkingmarkupStrupupStruptoReanDenhancingCodingsifice.1）shemeSsentialInxmmllforelementsswithcontentsswithcontent contentcontent，可确保wellwell-formedDocuments.2）Inhtmlible5，inhtmlibut forfix

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。