`

filter之alpha属性

    博客分类:
  • css
阅读更多

1.  FILTER: Alpha-透明度设置的效果
2.  filter之alpha属性
3.  用代码进行模糊的实例

alpha属性 ----原帖地址:http://hi.baidu.com/manly_001/blog/item/85d7ad0a71478438b1351d98.html

  alpha是用来设置透明度的。先来看一下它的表达格式:

  filter:alpha(opacity=opcity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)

  哇,这么长。是啊,不过这些参数都各有其用。

●Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。

●Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。


●Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。

●StartX和StartY代表渐变透明效果的开始坐标,

●finishX和finishY代表渐变透明效果的结束坐标。

  从上面讲的我们可以看出,如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

  



 实现上面这种效果的代码如下:

   <html>

    <head>

    <title>alpha</title>

    <style>//*定义CSS样式*//

    <!--

    div{position:absolute; left:50;top:70; width:150; }

    //*定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)*//

      img{position:absolute;top:20;left:40;filter:alpha(opacity=80)}

    //*定义图片的样式,绝对定位,滤镜属性是透明度为80*//

    -->

    </style>

    </head>

    <body>

    <div>

    <p style=“font-size:48;font-weight:bold;color:red;”>

    Beautiful </p>//*定义字体属性,前景色为红色*//

    </div>

    <p><img src=“ss01076.jpg”> </p>

    //*导入一张图片*//

    </body>

    </html>

  如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改img的样式属性,把head中的Img样式属性代码改为如下所示:

  img{position:absolute;top:20;left:40;

    filter:alpha(opacity=0,finishopacity=100,

    style=1,startx=0,starty=85,finishx=150,finishy=85);}

    //*设置透明渐变效果,起始坐标,终止渐变坐标,并设置透明样式值(style=1)为   线形*//

  这段代码产生的效果如左下图所示,右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果。


例子:这里面火狐和IE全都有透明效果
<div id="t" style="border:solid red 1px;opacity:0.3; filter:alpha(opacity=30)">
111111
</div>


来自:http://blog.163.com/zhong-wei-jie@126/blog/static/59999073201012395210314/
分享到:
评论

相关推荐

    div+css布局中的alpha 不透明度使用说明

    语法:filter: Alpha(参数1=参数值, 参数2=参数值,…) 说明:alpha属性包括很多参数,如下表所示。 alpha属性的参数设置 参数 具体含义及取值 opacity 代表透明度水准,默认的范围是从0到100,表示透明度的百分比。...

    常用的四种CSS透明属性介绍

    如下代码: ...该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。-khtm

    js和jQuery设置Opacity半透明 兼容IE6

    透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的,IE使用滤镜filter的alpha属性,firefox和其它浏览器不支持滤镜,它们使用opactiy属性设置透明度,下面示例设置透明度为30%: IE:filter: alpha(opacity:...

    CSS Alpha透明相关知识学习

    图片的透明效果是网页中需要用到的一种特殊形式,虽然不是非常的常用,但是遇到这样的需求往往有点措手不及,在jb51.net的文章中虽然有这方面的CSS实例... 简单解释,IE使用私有属性filter:alpha(opacity),Moz Family

    CSS.rar_Alpha_HTML CSS 、_css

    css教程,精通css的滤镜,第一章:css简介。第二章:CSS扩展部分:CSS滤镜属性(Filter Properties)。第三章:Alpha 滤镜 第四章:Gray ,Invert,Xray 滤镜。第五章:精通 CSS 滤镜(五)

    IE4.0以上支持的滤镜属性表

    Alpha 属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。他们的参数含义分别如下: “opacity ...

    原生js和jquery中有关透明度设置的相关问题

    下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明...

    div背景半透明,覆盖整个可视区域的遮罩层效果

    1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...

    div背景色半透明

    可实现div背景色半透明,不是用的filter:alpha(opacity=50);...属性,而是用的rgba(0,0,0,0.5),如果用的filter:alpha(opacity=50);opacity:0.5;那么它有个缺点,就是这个div里边的所有子元素也会有半透明效果

    CSS3不透明度实例讲解

    如何设置透明度?定义opacity属性,通过设置该属性能够使任何元素...3、针对IE浏览器,可以使用它的私有属性filter来兼容:filter:alpha(alpha=value);。 实例:设计灯箱广告背景布 XML/HTML Code复制内容到剪贴板

    html div 透明样式示例代码

    参数解析: alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,style,startX,startY,finishX,finishY). opacity代表透明度数,选值0-100,0是完全透明,100是不透明. finishopacity...

    div+css设置div的背景为半透明的方法

    说明: 1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当...

    FireFox火狐浏览器与IE兼容问题 – 透明滤镜 DIV滚动条

    问题一:最简单的鼠标移过手变型的css要...filter: Alpha(Opacity=50); /* for IE */ opacity: .5;/* for Firefox */ style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.Moz

    使用HTML语言和CSS开发商业站点.zip

    1. 使用position属性定位页面元素。 2. position属性值有static、relative、absolute和fixed,其中relative和absolute两种定位方式是网页制作中...4. 使用opacity或filter:alpha(opacity=x)方式设定网页元素的透明

    CSS层透明实现方法

    主要为大家介绍了CSS层透明实现方法,涉及filter:alpha属性的使用技巧,非常简单实用,需要的朋友可以参考下

    CSS3中的opacity属性使用教程

    filter: alpha(opacity=80); /* 其他 */  opacity: 0.8;  RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到...

    通过javascript设置css属性的代码

    1.透明度: 如果没有为一个文本指定一个背景颜色或者一个背景图像,那么这个元素的背景通常是透明的。 这一点很重要,如果一个绝对...// transparency for older Mozillas filter:Alpha(opacity=75);//for IE 2.带有连

    原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性:filter= “alpha(opacity=” + value+ “)”(兼容ie)和opacity=value/100(兼容FF和GG)。 先来看看设置透明度的兼容性代码: 代码如下: function setOpacity(ele, opacity) {...

    CSS3中的Opacity多浏览器透明度兼容性问题

    IE: filter:alpha(opacity) Mozilla: -moz-opacity Safari: -khtml-opacity 很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity。(新版Opera已经支持opacity) 所以以前用CSS设定一个...

    div 背景透明度 如何设置一个div的背景透明度

    你读DIV背景颜色透明度的设置是否熟悉,这里和大家简单分享一下,通常我们通过DIV的style样式属性filter来设置DIV背景透明样式,也可根据alpha提供的参数进行组合控制。 本节向大家爱描述一下如何设置DIV背景颜色...

Global site tag (gtag.js) - Google Analytics