html做图片模糊效果,使用CSS制作跨浏览器的图片模糊效果
在photoshop中,我们要制作一个图片的模糊效果是非常简单的,简单的实用高斯模糊等模糊滤镜就可以完成。现在,我们可以使用CSS和SVG来着网页中实现ps级的模糊效果。
页面中的图片模糊效果不可以滥用,使用不正确或过度使用的话,会使网页的用户体验度大大降低。通常模糊效果会和一个过渡效果相结合,在鼠标滑过元素时,元素会慢慢的变得清晰起来。
关于IE 9+浏览器
由于微软自己制定了一套IE浏览器的WEB标准,从IE5.5开始,微软就推出了各种专用滤镜来支持各种标准的CSS滤镜,其中包括DX滤镜。但是微软在IE10/IE11浏览器中没有相应的滤镜,这使得有很多滤镜效果不能实现。如果要实现真正跨浏览器的图像模糊效果,建议还是使用canvas来实现,网上有一些这方面的插件,例如StackBlur,另外还可以参考一些这个插件:HTML5 canvas生成图片马赛克特效插件。
HTML结构
在这个例子中,我们将简单的实用一幅图片来作为HTML结构。
CSS模糊滤镜
可以通过CSS滤镜来为一幅图片制作模糊效果:
img.blur {
width:400px;
height:490px;
-webkit-filter: blur(3px);
filter: blur(3px);
}
SVG模糊滤镜
目前,CSS模糊绿可以工作在桌面和移动手机的Chrome和Safari浏览器以及Firefox 35+浏览器上。为了支持旧版本的Firefox浏览器,我们需要使用SVG模滤镜。
可以将上面的代码保存为blur.svg文件,或者将它直接嵌入HTML页面中。然后CSS样式代码要做如下的修改:
img.blur {
width:400px;
height:490px;
filter: url(blur.svg#blur);
-webkit-filter: blur(3px);
filter: blur(3px);
}
对旧版本IE浏览器的支持
要使IE4-9浏览器支持图像模糊效果,可以使用微软专用的DX滤镜来实现。
img.blur {
width:400px;
height:490px;
filter: url(blur.svg#blur);
-webkit-filter: blur(3px);
filter: blur(3px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
制作模糊过渡动画效果
正如前面提到的,图片的模糊效果通常和一个过渡效果相结合。这里使用:hover和:focus来制作鼠标滑过效果。当鼠标滑过模糊的图片的时候,会平滑的过渡到为模糊前的状态。
img.blur:focus, img.blur:hover {
-webkit-filter: blur(0px);
filter: blur(0px);
filter: none;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
注意:IE浏览器不支持a元素之外的:hover伪元素,所以是看不到效果的。
关于模糊图像的边部问题
和其它的过滤器不同,blur过滤器会将图片的边部一起进行模糊处理。如果你只希望模糊图像的内部,可以有几种解决方案:
如果你的图片的色调的颜色是一样的,例如都是黑色,你可以将
或图片的包裹容器设置为黑色,这样,图片边部的模糊就区分不出来了。
你可以使用CSS的clip属性来剪裁图片的边部。clip的裁剪顺序总是下面的样子:
clip: rect( top, offset of right clip from left side, offset of bottom from top, left)
举个例子:如果图片的宽度为367像素,高度为459像素,模糊为2像素,所以你要裁剪的区域为:
clip: rect(2px,365px,457px,2px);
注意:clip属性只有在元素的定位为position: absolute是才有作用。
另外,你还可以使用一个容器来包裹图片,如一个
使用CSS来模糊图像的知识就介绍这么多,下一篇文章中我们要介绍如何使用CSS来模糊文本。希望这内容对你有所帮助!
html做图片模糊效果,使用CSS制作跨浏览器的图片模糊效果相关推荐
- 如何调试CSS的跨浏览器样式bug
首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些"好的" ...
- CSS实现跨浏览器兼容性的盒阴影效果
2019独角兽企业重金招聘Python工程师标准>>> CSS实现跨浏览器兼容性的盒阴影效果 一.无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了. ...
- animate.css 兼容ie,animate.css一个跨浏览器的CSS动画库
animate.css一个跨浏览器的CSS动画库.简单易用.虽然已Star,但每次使用使用时都要在stars里查找...当然啦,更多动画库可以参考这里. 如何使用 要在网站中使用animate.css ...
- [css] 如何使用css实现跨浏览器的最小高度?
[css] 如何使用css实现跨浏览器的最小高度? div{height:auto!important; height:200px; min-height:200px; } 这个第一个已经 impor ...
- html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验 互联网 发布时间:2008-10-17 19:28:20 作者:佚名 我要评论 让你使用DIV CSS排版 不是让你用换个标签然后再去按照表格的方式去排版 ...
- div做表格 html5,div+css制作表格
本章给大家介绍如何用div+css制作表格,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. html: 花名册: 序号 姓名 年龄 footer footer footer 1 Jo ...
- 苹果浏览器分辨率css,苹果(Safari)浏览器的图片width设置为100%但实际显示为980px改成的问题方法...
最近在做一个页面时,发现在 iPad 的 Safari 浏览器中背景显示不全,定位到该 div 后发现所指定 css 的宽度为 100% : 到百度搜索后发现,safari 中 viewport 默认 ...
- css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程 今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
- 设计图片 转为html css,html2canvas 将代码转为图片_html/css_WEB-ITnose
最近,我通过 众成翻译 学习和翻译了一系列优秀的文章,许多文章都值得向大家推荐.但是,好的技术文章通常都有大段的代码.一般情况下,这并没有什么问题,因为不论是众成翻译.我的博客或者是其他转载技术类文章 ...
最新文章
- 要强大的“黑匣子”,还是“可解释”的机器学习?| 清华AI Time激辩
- 如何解决Asp.Net MVC和WebAPI的Controller名称不能相同的问题
- TNF诱导的关节破坏由IL-1介导
- Tips——RN webview如何实现首次加载自动登录及后续定时登录
- [转]互联网产品经理必上的九个资讯+分析类网站
- cassandra 备份_使用sstableloader恢复Cassandra Priam备份
- 【Android实战】Gallary+ImageSwicther图片查看器
- YAML_11 when条件判断
- Docker hello workd
- matlab低通滤波器库函数代码_Matlab中模拟低通滤波器的函数
- linux环境下如何查看solr版本,Solr环境搭建(linux)
- 数学模型——Logistic回归模型(含Matlab代码)
- 销售管理软件系统的两大优势是什么?
- Java修改图片格式
- ICEM CFD学习笔记(2)
- 参考文献在论文中进行引用标注
- Windows 7 安装时候提示,无法更改启动项安装失败,以及msr分区
- Oracle Linux网卡参数默认设置导致ORA-603
- C#在获得客户端ip的时候,获得的ip地址为::1
- UML类图、6种关系
热门文章
- 监理工程师岁月--蓝精灵的帽子
- [proxy:0:0@node1] HYD_spawn : execvp error on file
- 4 Motion Planning for Self-Driving Cars 课程习题编程解答及笔记
- 广电宽带 拨号失败 服务器无响应,广电宽带无法打开FTP,该如何排除问题 ?
- 建站+SEO(基础+)在线网课-优就业-专题视频课程
- SPC-1性能总榜第一,中国厂商霸榜背后是存储新势力崛起
- 【labview】基于Labview的齿轮传动测控系统设计与研究
- 物联网 + 区块链系列(一):物联网面临的挑战
- html制作商城大概布局,html 网上商城部署项目
- 至今思项羽,不肯过江东