云计算应用开发 任务3 前台H5技术扩展阅读 5.2 CSS filter blur(); 实现高斯模糊效果,不可不知的细节优化.docxVIP

云计算应用开发 任务3 前台H5技术扩展阅读 5.2 CSS filter blur(); 实现高斯模糊效果,不可不知的细节优化.docx

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
CSS: filter: blur(); 实现高斯模糊效果,不可不知的细节优化 前言 在项目中,要实现如下的效果: 页面顶部的设计稿,前面一个卡片式的轮播,后边的背景(是椭圆的一部分)取前面的图片,进行一个高斯模糊的处理。 开始 前面的轮播部分,使用了第三方的轮播插件,非常好用,推荐给大家( 地址)。轮播,不作为今天的主要内容,暂时简单描述下,有机会再详细讲解。有兴趣的同学可以自己试一试,根据插件提供的功能,进行一些样式调整即可。 现在开始分析后面背景的实现方式,最开始考虑的是使用一个div,给div设置背景图片,设置div的width、height以及border-radius属性,达到椭圆的效果。 实践 1. 使用背景图片的实现方式 HTML: div class=head div class=bg/div /div CSS: .bg{ /* 设置相对定位 */ position: relative; /* 宽度120%,-10%让元素集中 */ left: -10%; /* 为了实现椭圆效果 */ width: 120%; height: 132px; /* 只设置左下角和右下角的圆角 */ border-radius: 0 0 80% 80%; /* 设置高斯模糊 */ filter: blur(20px); /* 背景图片 */ background: url(/static/demo.jpg) center; background-size: cover; } 效果图: 可以看到filter: blur(20px);设置模糊效果后, 在椭圆区域的边缘,有一些扩展的白边。(可以试试矩形的div, 效果会更明显) 解决方式:给div的父元素添加overflow: hidden; CSS: .head{ overflow: hidden; height: 132px; } 效果图: 可以看到div底边的模糊效果已经没有了,限制了div的显示大小,但是没有实现想要的椭圆效果。两边的圆弧还是有很明显的扩展效果。 2. 综上,使用背景图片的方式无法实现想要的效果。在知乎上看到一个优秀的回答( 原文),参考里面的 实例,可以实现。 实现方案: 外层一个div设置为椭圆形状,控制内层img可显示的区域。图片和形状用两个元素分开控制。 HTML: div class=bg img src=/static/demo.jpg class=test-img /div CSS: /* 外层椭圆形状,内层图片只能在椭圆区域展示 */ .bg{ position: relative; left: -10%; width: 120%; height: 130px; border-radius: 0 0 80% 80%; overflow: hidden; } /* 内层显示的图片 */ .bg img{ width: 100%; height: 100%; filter: blur(20px); overflow: hidden; } 效果图: Bingo!? 完美实现想要的效果啦! O(∩_∩)O~~ 总结 1. CSS使用filter: blur(20px);实现高斯模糊效果,周边会出现扩展的白边; 解决方案: 对父元素设置overflow: hidden; 隐藏即可。 2. 对于复杂的页面结构,可以考虑使用多个元素实现;不要局限于样式,从结构上分析问题。

您可能关注的文档

文档评论(0)

WanDocx + 关注
实名认证
文档贡献者

大部分文档都有全套资料,如需打包优惠下载,请留言联系。 所有资料均来源于互联网公开下载资源,如有侵权,请联系管理员及时删除。

1亿VIP精品文档

相关文档