- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 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. 对于复杂的页面结构,可以考虑使用多个元素实现;不要局限于样式,从结构上分析问题。
您可能关注的文档
- 电工电子技术(资源库课程) RLC串联交流电路的分析(二) :教学案例2:RLC并联交流电路参数测量.doc
- 电工基础 参考资料 《电工基础》课程简介.doc
- 电工基础与测量 任务1.1 电路和电路模型 讲解开关电源内部元器件.docx
- 电工应用技术 附录 综合作业(二).doc
- 电机与电力拖动 知识点一:电气原理图设计 任务五:三相异步电动机的自动往返控制电路的设计与安装.docx
- 移动应用软件开发(基于iOS平台)-2017 Linux下的学习环境 38Linux下的学习环境 文档.docx
- 移动应用软件开发(基于iOS平台)-2017 挑战CodeMonkey游戏 第三关 gjs.docx
- 移动应用软件开发(基于iOS平台)-2017 挑战CodeMonkey游戏 挑战CodeMonkey游戏 gjs.docx
- 移动应用软件开发综合实训(基于iOS平台)-2017 图像选择器的使用 UIImagePickerController照片选择器.docx
- 移动游戏开发综合实训-2017 PS基础 PS基础2_PS基础界面.doc
- 云锦传统技艺与创新 2、引纬 引纬-技艺培训.docx
- 云锦传统技艺与创新 2、云锦研究的深入与拓展 云锦研究的深入与拓展.docx
- 云运维与管理 其他 单个SLB实例单个端口实现多个站点搭建.docx
- 运输管理 第四章 运输质量控制 J(教学案例3-3-3)速冻食品—冷藏运输—麦德龙超市运输体系.doc
- 造价软件培训课程 房间组合及绘制 房间组合.doc
- 增强现实引擎开发(Unity AR) EasyAR SDK基本配置 EasyAR SDK基本配置.docx
- 展览管理域 电子教材 12康雅宁 邀请函.doc
- 织花图案设计 认识蒙版 蒙版.docx
- 电力行业企业案例(资源库课程) 绘图题 绘图题(8) (2).doc
- 执行与驱动技术 2.1旋转磁场 2.1旋转磁场教案.docx
最近下载
- 阿法拉伐分油机中文说明Instruction book1.pdf VIP
- 《Java程序设计》教案(思政版).docx VIP
- 四年级上册数学《三位数乘两位数的笔算乘法》(共18张PPT).pptx VIP
- AWS B4.0-2016 焊缝机械测试的标准方法(中文版).pdf
- 《绩效与薪酬管理》课程教学大纲(中文).docx VIP
- 国开电大学习网网络安全技术形考任务答案.pdf VIP
- 成长赛道飞机机电设备维修专业1500字.pptx VIP
- 从业人员食品安全知识培训计划及培训考核记录.docx VIP
- GB50641-2010 有色金属矿山井巷安装工程施工规范.docx VIP
- 胃癌根治术的手术护理查房2讲课文档.ppt VIP
文档评论(0)