css中filter:alpha透明度使用

标签：

css中filter:alpha透明度使用
    使用filter可以设置透明度，filter:alpha在IE下是没有问题的，要支持firefox就需要使用-moz-opacity，下面有个不错的示例，大家可以参考下

   filter:alpha(opacity=0, finishopacity=100, style=2, startx=0, starty=5, finishx=200, finisyY=195) 

    opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
    finishopacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。
    style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
    startx和starty：代表渐变透明效果的开始X和Y坐标。
    finishx和finishy：代表渐变透明效果结束X和Y 的坐标。
    对于IE上述方法是没有问题的。若要支持firefox请参照下面：

    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.5; /* Moz + FF */
    opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/ 

    简单解释，IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。




关于filter的引申
一、CSS3 filter
    CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜，一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

二、使用方法：
    filter:filter(value);
    filter:filter(value) filter(value) filter(value);/* 多属性 */

三、具体实例
    1、Blur（模糊）
        图像模糊参数单位:px/em/pt。 示例：
        
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        
    2、Brightness（亮度）
        亮度参数:”-1″至”1″,值越大亮度越高。示例：
        
        filter: brightness(0.5);
        -webkit-filter: brightness(0.5);
        -moz-filter: brightness(0.5);
        -o-filter: brightness(0.5);
        -ms-filter: brightness(0.5);
        
    3、Saturation（饱和度）
        饱和度参数:半分比,以100%为中间值。 示例：
        
        filter: saturate(50%);
        -webkit-filter: saturate(50%);
        -moz-filter: saturate(50%);
        -o-filter: saturate(50%);
        -ms-filter: saturate(50%);

    4、Hue Rotate（色相）
        色相参数:角度值0—360。 示例：
        
        filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
        -moz-filter: hue-rotate(180deg);
        -o-filter: hue-rotate(180deg);
        -ms-filter: hue-rotate(180deg);

    5、Contrast（对比度）
        对比度参数:百分比；以100%为中间值。示例：
        
        filter: contrast(50%);
        -webkit-filter: contrast(50%);
        -moz-filter: contrast(50%);
        -o-filter: contrast(50%);
        -ms-filter: contrast(50%);

    6、Invert（反相）
        反相参数：百分比；0%-100%。示例：
        
        filter: invert(100%);
        -webkit-filter: invert(100%);
        -moz-filter: invert(100%);
        -o-filter: invert(100%);
        -ms-filter: invert(100%);

    7、Grayscale（灰度）
        灰度参数:百分比 0%-100%。示例：
        
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        Sepia（怀旧）

    8、Sepia（怀旧）
        怀旧参数:百分比 0%-100%。示例：
        
        filter: sepia(100%);
        -webkit-filter: sepia(100%);
        -moz-filter: sepia(100%);
        -o-filter: sepia(100%);
        -ms-filter: sepia(100%);
        

css中filter:alpha透明度使用

标签：

原文地址：http://www.cnblogs.com/foodoir/p/5722683.html