滤镜名    说明

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. JSP 知识基本

    from:http://blog.csdn.net/caipeichao2/article/details/38589293 more:http://www.2cto.com/kf/web/jsp/4 ...

  2. java--交通灯管理系统

    转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9944947 .交通灯管理系统的业务和需求分析 交通灯管理系统的项目需求: 模拟实现十字路口的交 ...

  3. netlink组播的使用

    Linux的netlink机制是非常好的Linux内核与应用层进行双向交互数据的方式.其常用的单播方式可以实现内核为服务端,应用层为客户端的通信方式.如果需要实现应用层为服务端,内核为客户端的通信方式 ...

  4. Mac OS X安装native gem提示找不到 dyld_stub_binding_helper

    在Mac OS X10.10下sudo gem install curses 返回如下错误: apple@kissAir: ruby_src$sudo gem install curses Passw ...

  5. 【省带宽、压成本专题】深入解析 H.265 编码模式，带你了解 Apple 全面推进 H.265 的原因

    过去几年,又拍云一直在点播.直播等视频应用方面潜心钻研,取得了不俗的成果.我们结合点播.直播.短视频等业务中的用户场景,推出了"省带宽.压成本"系列文章,从编码技术.网络架构等角度 ...

  6. 不是标准execl转换处理方法

    不是标准execl的主要原因就是原本的html.xml.txt尾椎的文件,更改成了xls尾椎的文件 面对这种问题,最开始我用了jawin.jar,但是始终会报错,NoClassDefFoundErro ...

  7. 【转载】tomcat+nginx+redis实现均衡负载、session共享(一)

    http://www.cnblogs.com/zhrxidian/p/5432886.html 在项目运营时,我们都会遇到一个问题,项目需要更新时,我们可能需先暂时关闭下服务器来更新.但这可能会出现一 ...

  8. Day 网络协议介绍 简单通信的实现

    比如说实现两个手机之间的通信,需要做的几部: 服务端: 1,买手机 2,插卡 3,开机 4,等电话链接 5,基于建立的链接,收发协议 6,挂电话 7,关机 import socket #买手机 pho ...

  9. window.open open new window?

    when ever i use window.location.href=//some url it always open a new window, this only happens when ...

  10. 开源纯C#工控网关+组态软件(十)移植到.NET Core

    一.   引子 写这个开源系列已经十来篇了.自从十年前注册博客园以来,关注了张善友.老赵.xiaotie.深蓝色右手等一众大牛,也围观了逗比的吉日嘎啦.精密顽石等形形色色的园友.然而整整十年一篇文章都 ...