用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 ...
随机推荐
- MySQL工作经验
以下是根据工作中遇到各种场景用到的一些Mysql用法,比较实用,基本是语法之外的一些东西. 修改账户密码 1.打开Mysql控制台,输入原密码: 2.输入以下语法:mysql> set pass ...
- JAVAOOP集合框架
集合框架三大内容:对外的接口.接口的实现和对集合运算的算法 集合有三大类接口:List.Set.Map 共同点:都是集合接口,都可以用来存储很多对象 不同:Collection接口存储一组不唯一(允许 ...
- 天气预报api-汇总
和风天气 https://www.heweather.com/
- composer安装教程(Linux版)
composer 是款不错的工具,那么如何进行安装composer呢 如果您是linux系统或是mac系统 请先确定是否安装了curl linux安装curl 1 yum install -y c ...
- PHP生成特定长度的纯字母字符串
PHP中,md5().uniqid()函数可以返回32位和13位不重复的字符串,但是这些字符串都可能包含有数字.如果需要纯字母的字符串,而且长度不定,比如8位,那么直接用这两个函数无法达到效果. 这时 ...
- NOI P1896 互不侵犯 状压DP
题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 注:数据有加强(2018/4/25) ...
- python QQ邮件发送邮件
# -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMEText from email.header import ...
- Python 装饰器执行顺序迷思
Table of Contents 1. 探究多个装饰器执行顺序 1.1. 疑问 1.2. 函数和函数调用的区别 1.3. 装饰器函数在被装饰函数定义好后立即执行 1.4. 疑问的解释 2. 参考资料 ...
- TouTiao开源项目 分析笔记9 实现一个问答主页面
1.根据API返回创建几个基础的Bean 1.1.WendaArticleDataBean类 API返回的数据如下: /** * cell_type : 36 * extra : {"wen ...
- PHP.35-TP框架商城应用实例-后台11-商品分类-删除分类(2种方法)、添加、修改
删除分类 删除一个分类的同时,其所有子分类都删除 在控制器CategoryCtroller.class.php中添加删除函数(delete) 在分类模型中添加钩子函数_before_delete()[ ...