用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 ...
随机推荐
- C#进阶学习笔记(个人整理)
学习笔记 第一章: 一.回顾数组 1.变量 : 只能存储一个数据 2.数组 :存储固定大小的相同类型的数据 3.对象 : 存储多个相同/不同类型的数据 4.集合 : 特殊的容器,存储N个相同/不同类型 ...
- 自定义扩展Compare比较方法
public static int Compare<T, V>(this T x, T y, Func<T, V> func) { return Comparer<V&g ...
- Linux下配置npm存放路径,解决权限问题
1.打开cmd命令行,查看当前配置 输入 npm config ls 先看一下当前npm的配置环境,由于我已经修改过,所以可以看到修改后的路径 2.修改路径 这里需要修改两个路径,module路径和c ...
- linux面试集
shell:1.$# 和 $*之类的特殊变量 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n是一个数字,表示第几个参数.例如,第一个参数就是$1 $# 传递给脚本或 ...
- python3 练习题100例 (十八)托儿所问题
#!/usr/bin/env python3 # -*- coding: utf-8 -*- """练习十八:某托儿所有大.中.小三个班级,其儿童月龄分别用如下 三个列表 ...
- 猜数字问题 python
猜数字问题,要求如下: ① 随机生成一个整数 ② 猜一个数字并输入 ③ 判断是大是小,直到猜正确 ④ 判断时间提示:需要用time模块.random模块该题目不需要创建函数 import random ...
- POJ:3273-Monthly Expense
Monthly Expense Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 32067 Accepted: 12081 Des ...
- 大话CNN经典模型:LeNet
近几年来,卷积神经网络(Convolutional Neural Networks,简称CNN)在图像识别中取得了非常成功的应用,成为深度学习的一大亮点.CNN发展至今,已经有很多变种,其中有 ...
- 我的转行之路(电气转IT)------2018阿里校招面经
博主本专业电气,今年3月下定决心转向互联网行业,本来想依仗自己比较自信的学习能力自学成才的,不过学了一段时间感觉还是需要一个人来指点,不仅仅是指点一些技术性的问题,更是需要有人来指点一下方向性的问题. ...
- 创建、导入、导出、复制以及粘贴 WMI 筛选器
TechNet 库 Deployment Forefront Identity and Access Management 基础结构优化 浏览器 Microsoft Dynamics Products ...