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滤镜实现的一些特效的更多相关文章

  1. PS滤镜制作下雨照片特效

    原图 一.打开你想要添加下雨效果的照片,并新建一个图层,命名为雨,填充为黑色,对“雨”层执行:滤镜 > 杂色> 添加杂色,参数如图. 二.对“雨”层执行:滤镜 > 模糊 > 高 ...

  2. 你值得拥有的Mac PS滤镜插件和特效处理软件合集,不要错过!

    以下几款是Mac上强大的Photoshop滤镜插件和特效,可以让我们更加高效率的使用PS,设计和处理出精美的图片. 1. Alien Skin Eye Candy Eye Candy是一款强大酷炫的P ...

  3. 【强大精美的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种滤镜和 ...

  4. Python: PS 滤镜--水波特效

    本文用 Python 实现 PS 滤镜中的 水波特效 import numpy as np from skimage import img_as_float import matplotlib.pyp ...

  5. Python: PS 滤镜--碎片特效

    本文用 Python 实现 PS 滤镜中的碎片特效,这个特效简单来说就是将图像在 上,下,左,右 四个方向做平移,然后将四个方向的平移的图像叠加起来做平均.具体的效果图可以参考之前的博客 http:/ ...

  6. Android——界面特效 相关知识总结贴

    帮助android UI实现动画特效 http://www.apkbus.com/android-79595-1-1.html 帮助android应用程序实现动画特效 http://www.apkbu ...

  7. Python: PS 滤镜--素描

    本文用 Python 实现 PS 滤镜中的素描特效,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/386 ...

  8. Python: PS滤镜--径向模糊

    本文用 Python 实现 PS 滤镜中的径向模糊特效,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/3 ...

  9. Python: PS 滤镜--高反差保留 (High pass)

    本文用 Python 实现 PS 滤镜中的 高反差保留 特效,具体的算法原理和图像效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/deta ...

随机推荐

  1. 如何在maven中的项目使用tomcat插件

    在pom.xml中引入tomcat7插件,具体示例代码如下: <project> <build> <plugins> <plugin> <grou ...

  2. RPC框架基础概念理解以及使用初体验

    RPC:Remote Procedure Call(远程服务调用) RPC是做什么的 通过RPC框架机器A某个进程可以通过网络调用机器B上的进程方法,就像在本地上调用一样. RPC可以基于HTTP或者 ...

  3. LeetCode207 课程表

    问题:课程表 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹配来表示他们: [0,1] 给定 ...

  4. IntelliJ IDEA 2016 汉化说明:

    把汉化包解压后,然后将resources_cn.jar 复制到 .lib 目录,重新打开就是中文.

  5. Redis ---------- key的操作

    key命名规则 除空格和\n,其他都可以 select   db -index选择数据库 例1  select   5 例2 type 查看数据key类型 type name 例3  keys pat ...

  6. C# WPF使一个窗口挡在最前面,且不处理此窗口就不能点击其他窗口

    模态框弹出就可以了.窗口用ShowDialog调用. 可以在子窗体里把WindowStartupLocation设置为CenterOwner, 让子窗体在MainWindow的中心位置显示

  7. iOS-cell的封装和重用

    一.通过xib描述cell---(cell的高度一致,cell里面控件布局基本一样): 1.(M) 创建模型: -------------------------------------------- ...

  8. 第一章:Hello, World!

    感谢作者 –> 原文链接 本文翻译自The Flask Mega-Tutorial Part I: Hello, World! 一趟愉快的学习之旅即将开始,跟随它你将学会用Python和Flas ...

  9. java程序——凯撒加密

    古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报: 请编写一个程序,使用上述算法加密或解密用户输入的英文字串要求设计思想.程序流程图.源代码.结果截图.   设计思想:输入一个字符串,然后将其中每 ...

  10. phpstorm调试配置 Xdebug

    这已经楼主第二次因为phpstorm的调试配置折腾了几个小时,这次一定要记下来!!! 以Xdebug chrome浏览器为例 一:安装 JetBrains IDE Support 二:安装 Xdebu ...