CSS实现图片变灰色及透明度
2014-01-16 10:58
375 查看
【图片变灰】
每当遇到哀悼日,很多网站快速变灰色,来看看实现方式吧:
方式一,仅支持ie)
方式二,适合小页面,仅支持ie)
方式三,仅支持ie与chrome)
方式四,支持所有浏览器)
推荐方式:方法三 > 方法四 > 方法一 > 方法二
推荐原因:方法三虽不支持firefox,但稳定,速度快,占用资源小!
【图片透明】
接下来,来说说图片透明,直接看代码:
说明:
第一个属性(filter)仅支持ie;
第二个属性(-moz-opacity)对firefox低版本支持
第三个属性(opacity)对firefox高版本支持
每当遇到哀悼日,很多网站快速变灰色,来看看实现方式吧:
方式一,仅支持ie)
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
方式二,适合小页面,仅支持ie)
body {filter:gray}
方式三,仅支持ie与chrome)
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
方式四,支持所有浏览器)
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=function(){ grayscale(document.body); } </script>
推荐方式:方法三 > 方法四 > 方法一 > 方法二
推荐原因:方法三虽不支持firefox,但稳定,速度快,占用资源小!
【图片透明】
接下来,来说说图片透明,直接看代码:
filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;
说明:
第一个属性(filter)仅支持ie;
第二个属性(-moz-opacity)对firefox低版本支持
第三个属性(opacity)对firefox高版本支持
相关文章推荐
- 用CSS实现的图片透明度链接效果代码
- 用CSS实现的图片透明度链接效果代码
- CSS实现网页图片的等比例缩放
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 用CSS实现文字环绕图片的效果
- CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能【转】
- CSS无图片实现小三角
- CSS实现背景透明而背景上的文字图片不透明
- CSS+Canvas实现图片灰度效果,兼容所有浏览器
- Android实现的可以调整透明度的图片查看器实例
- CSS+Canvas+jQury实现图片灰度渐变效果
- html+css实现图片滑移效果
- html+css实现图片展示桌面
- css+js实现图片反转效果
- 用CSS实现无图片圆角框
- CSS实现三列图片等宽等间距布局
- CSS代码实现鼠标移过更换背景图片
- 纯CSS无JS实现灰色下拉导航菜单代码
- CSS实现鼠标放图片上显示白色边框+文字描述