用IE滤镜实现的一些特效
CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作为,很多有经验的开发者都听知道IE的滤镜,看看下面的内容将告诉大家,IE是如何通过这些滤镜,实现CSS3效果的。
透明度
最为开发者所熟知的滤镜之一。
#myElement {
opacity: .4; /* other browsers */
filter: progid: DXImageTransform.Microsoft.Alpha( opacity=40 ); /* IE6, IE7, and IE8 */
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha( opacity=40 )"; /* IE8 only */
}
阴影
.box-shadow { -moz-box-shadow: 2px 2px 3px #969696; /* Firefox */ -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow( color='#969696', Direction=145, Strength=3 ); }
渐变
#gradient {
/* Firefox 3.6 */
background-image: -moz-linear-gradient( top, #81a8cb, #4477a1 );
/* Safari & Chrome */
background-image: -webkit-gradient(linear , left bottom , left top , color-stop( 0, #4477a1 ) ,
color-stop( 1, #81a8cb ));
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = '#81a8cb',
endColorstr = '#4477a1' );
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#81a8cb',
endColorstr = '#4477a1' )";
}
背景色透明
#rgba p {
/* other browsers */
background: rgba( 98, 135, 167, .4 );
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#886287a7',
endColorstr = '#886287a7' );
}
多背景
#multi-bg {
/* other browsers */
background:url(../images/Yomi.jpg) center center no-repeat,
url(../images/body_bg.gif) top left repeat-x;
/* IE */
backrgound:transparent url(../../../images/Yomi.jpg) center center no-repeat;
/* IE6-8 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/body_bg.gif',sizingMethod='crop')
/* IE8 only */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = '../images/body_bg.gif', sizingMethod = 'crop')";
}
旋转
#rotate {
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-moz-transform: rotate(180deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 2); /* IE */
}
备注:IE 系列采用滤镜必须配合background属性一起使用filter才有效,另外在IE6、IE7中还须配合width/height,filter放可生效。
用IE滤镜实现的一些特效的更多相关文章
- PS滤镜制作下雨照片特效
原图 一.打开你想要添加下雨效果的照片,并新建一个图层,命名为雨,填充为黑色,对“雨”层执行:滤镜 > 杂色> 添加杂色,参数如图. 二.对“雨”层执行:滤镜 > 模糊 > 高 ...
- 你值得拥有的Mac PS滤镜插件和特效处理软件合集,不要错过!
以下几款是Mac上强大的Photoshop滤镜插件和特效,可以让我们更加高效率的使用PS,设计和处理出精美的图片. 1. Alien Skin Eye Candy Eye Candy是一款强大酷炫的P ...
- 【强大精美的PS特效滤镜合集】Alien Skin Eye Candy for Mac 7.2.2.20
[简介] Alien Skin Eye Candy for Mac 7.2.2 版本,支持最新的PhotoShop CC 2019.2018等版本,这是一款强大酷炫的PS特效滤镜合集,具有32种滤镜和 ...
- Python: PS 滤镜--水波特效
本文用 Python 实现 PS 滤镜中的 水波特效 import numpy as np from skimage import img_as_float import matplotlib.pyp ...
- Python: PS 滤镜--碎片特效
本文用 Python 实现 PS 滤镜中的碎片特效,这个特效简单来说就是将图像在 上,下,左,右 四个方向做平移,然后将四个方向的平移的图像叠加起来做平均.具体的效果图可以参考之前的博客 http:/ ...
- Android——界面特效 相关知识总结贴
帮助android UI实现动画特效 http://www.apkbus.com/android-79595-1-1.html 帮助android应用程序实现动画特效 http://www.apkbu ...
- Python: PS 滤镜--素描
本文用 Python 实现 PS 滤镜中的素描特效,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/386 ...
- Python: PS滤镜--径向模糊
本文用 Python 实现 PS 滤镜中的径向模糊特效,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/3 ...
- Python: PS 滤镜--高反差保留 (High pass)
本文用 Python 实现 PS 滤镜中的 高反差保留 特效,具体的算法原理和图像效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/deta ...
随机推荐
- 初探12C碰到的那些“坑”
一个昏天黑地的早上,刚搭建的系统忽然遭遇严重数据库问题.于是,主要人物闪亮登场了,他们分别是友商人员小灰和DBA小Y. 事情的开始,小Y接到小灰紧急救助电话... 小灰:小Y,我是友商的小灰,刚搭建的 ...
- springMVC-数据绑定
定义: 将http请求中参数绑定到Handler业务方法 常用数据绑定类型 1. 基本数据类型 不能为其它类型和null值 2. 包装类 可以为其它对象,全部转成null值 3. 数组 多个对象 ...
- spring-bean(xml方式DI)
三种属性注入方式 构造函数注入 1.在Bean实体中写入构造函数(带参构造) 2. <bean id=”该bean的名称” class=”注入的bean的全路径”> <constru ...
- php-5.6.26源代码 - 如何用C语言支持“类似异常”机制
代码编写在文件php-\Zend\zend.h #define zend_bailout() _zend_bailout(__FILE__, __LINE__) #ifdef HAVE_SIGSETJ ...
- 实用jquery插件
jquery toast 一个弹窗插件 jquery.form.min.js 一个Ajax表单插件
- Java 算法随笔(一)
1. 最大子序列和问题 给定(可能有负数)整数a(1).a(2).……a(n),求 a(1)+a(2)+……+a(j)的最大值. 也就是:在一系列整数中,找出连续的若干个整数,这若干个整数之和最大.有 ...
- JVM——参数设置、分析
原文:http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html 不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断 ...
- luogu3317 [SDOI2014]重建
原来矩阵树定理对于边是概率的情况也是适用的qwqwq. ref #include <iostream> #include <cstdio> #include <cmath ...
- 即将到来的5G,我们该做些什么准备?
本文来自网易云社区. 作者:任长存 5G和4G到底什么区别? 实际上5G只是4G通信技术上的演进,都是在 光速 = 波长*频率,这个数学公式上做文章,为什么这么讲? 首先大家都用过WIFI,WIFI的 ...
- 利用NSAttributedString实现图文混排
UILabel 和 UITextView 都能添加 NSAttributedString 属性字符串,通过这一点,可以实现带有属性的文字和文字内包含图片的文本内容展示. 效果如下: 1-初始化可变 ...