滤镜名    说明

Alpha     让HTML元件呈现出透明的渐进效果
Blur     让HTML元件产生风吹模糊的效果
Chroma     让图像中的某一颜色变成透明色
DropShadow     让HTML元件有一个下落式的阴影
FlipH     让HTML元件水平翻转
FlipV     让HTML元件垂直翻转
Glow     在元件的周围产生光晕而模糊的效果
Gray     把一个彩色的图片变成黑白色
Invert     产生图片的照片底片的效果
Light     在HTML元件上放置一个光影
Mask     利用另一个HTML元件在另一个元件上产生图像的遮罩
Shadow     产生一个比较立体的阴影
Wave     让HTML元件产生水平或是垂直方向上的波浪变形
XRay     产生HTML元件的轮廓，就像是照X光一样

Alpha 滤镜参数详解

参数名     说明     取值说明

Opacity     不透明的程度，百分比。    从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity     这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。    从0到100，0表是完全透明，100表示完全不透明。
Style     当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。    0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。
StartX     渐进开始的 X 坐标值    
StartY     渐进开始的 Y 坐标值    
FinishX     渐进结束的 X 坐标值    
FinishY     渐进结束的 Y 坐标值

Html代码

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

  <div class="transparent_class">测试透明度</div>

</body>

</html>

CSS代码：

.transparent_class {

    /* Required for IE 5, 6, 7 */

    /* ...or something to trigger hasLayout, like zoom: 1; */

    width:300px;

    height:300px;

    line-height:300px;

    text-align:center;

    background:#000;

    color:#fff;

    /* older safari/Chrome browsers */

    -webkit-opacity: 0.5;

    /* Netscape and Older than Firefox 0.9 */

    -moz-opacity: 0.5;

    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/

    -khtml-opacity: 0.5;

    /* IE9 + etc...modern browsers */

    opacity: .5;

    /* IE 4-9 */

    filter:alpha(opacity=50);

    /*This works in IE 8 & 9 too*/

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /*IE4-IE9*/

    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

}

需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面

-msfilter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  

filter: alpha(opacity=50); // second

CSS透明opacity和IE各版本透明度滤镜filter的准确用法的更多相关文章

  1. CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

    转载,原文见:http://blog.csdn.net/freshlover/article/details/17143341 CSS3的透明度属性opacity想必大家都已经用的无处不在了.而对于不 ...

  2. css透明属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  4. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  5. CSS透明属性详解代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opaci ...

  6. （转）兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...

  7. css透明背景兼容方案

    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...

  8. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  9. CSS透明属性详解

    .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ...

随机推荐

  1. HBase行锁

    1 行锁简介 在事务特性方面,hbase只支持单row的事务,不能保证跨row(cross-row)的事务.hbase通过行锁来实现单row事务.客户端进行操作时,可以显式对某一个行加锁,但是大部分情 ...

  2. js中获取方法名

    var tmp = arguments.callee.toString(); var re = /function\s*(\w*)/i; var matches = re.exec(tmp);//方法 ...

  3. Android 加载gif图片强大框架(支持预加载、缓存，还支持显示静态图片，一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  4. 深入理解springMVC思想

     转载:http://elf8848.iteye.com/blog/875830 深入理解Spring MVC 思想   目录  一.前言二.spring mvc 核心类与接口三.spring mvc ...

  5. Bash的一些零星笔记

    1.变量带入操作符 在脚本中,使用变量前做检查是很重要的.通过代入操作符,可以实现这方面的功能.比如当变量未赋值时为变量赋默认值,以及更多内容: ${parameter:-默认为空}:当paramet ...

  6. HBase最佳实践 - 集群规划

    本文由  网易云发布. 作者:范欣欣 本篇文章仅限本站分享,如需转载,请联系网易获取授权. HBase自身具有极好的扩展性,也因此,构建扩展集群是它的天生强项之一.在实际线上应用中很多业务都运行在一个 ...

  7. [C#]使用 C# 编写自己的区块链挖矿算法

    [C#] 使用 C# 编写自己区块链的挖矿算法 文章原文来自:Code your own blockchain mining algorithm in Go! ,原始文章通过 Go 语言来实现的,这里 ...

  8. Mac 下实现 pyenv/virtualenv 与 Anaconda 的兼容

    http://blog.csdn.net/vencent7/article/details/76849849 自己一直用的 pyenv 和 pyenv-virtualenv 管理不同的 python ...

  9. BugFix：URL or HTTP headers are too long (IP=127.0.0.1)

    错误提示: URL or HTTP headers are too long (IP=127.0.0.1) com.caucho.server.dispatch.BadRequestException ...

  10. Linux下高并发socket最大连接数

    http://soft.chinabyte.com/os/285/12349285.shtml (转载时原文内容做个修改) 1.修改用户进程可打开文件数限制 在Linux平台上,无论编写客户端程序还是 ...