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/
分享到:
相关推荐
语法:filter: Alpha(参数1=参数值, 参数2=参数值,…) 说明:alpha属性包括很多参数,如下表所示。 alpha属性的参数设置 参数 具体含义及取值 opacity 代表透明度水准,默认的范围是从0到100,表示透明度的百分比。...
如下代码: ...该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。-khtm
透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的,IE使用滤镜filter的alpha属性,firefox和其它浏览器不支持滤镜,它们使用opactiy属性设置透明度,下面示例设置透明度为30%: IE:filter: alpha(opacity:...
图片的透明效果是网页中需要用到的一种特殊形式,虽然不是非常的常用,但是遇到这样的需求往往有点措手不及,在jb51.net的文章中虽然有这方面的CSS实例... 简单解释,IE使用私有属性filter:alpha(opacity),Moz Family
css教程,精通css的滤镜,第一章:css简介。第二章:CSS扩展部分:CSS滤镜属性(Filter Properties)。第三章:Alpha 滤镜 第四章:Gray ,Invert,Xray 滤镜。第五章:精通 CSS 滤镜(五)
Alpha 属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。他们的参数含义分别如下: “opacity ...
下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明...
1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...
可实现div背景色半透明,不是用的filter:alpha(opacity=50);...属性,而是用的rgba(0,0,0,0.5),如果用的filter:alpha(opacity=50);opacity:0.5;那么它有个缺点,就是这个div里边的所有子元素也会有半透明效果
如何设置透明度?定义opacity属性,通过设置该属性能够使任何元素...3、针对IE浏览器,可以使用它的私有属性filter来兼容:filter:alpha(alpha=value);。 实例:设计灯箱广告背景布 XML/HTML Code复制内容到剪贴板
参数解析: alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,style,startX,startY,finishX,finishY). opacity代表透明度数,选值0-100,0是完全透明,100是不透明. finishopacity...
说明: 1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当...
问题一:最简单的鼠标移过手变型的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
1. 使用position属性定位页面元素。 2. position属性值有static、relative、absolute和fixed,其中relative和absolute两种定位方式是网页制作中...4. 使用opacity或filter:alpha(opacity=x)方式设定网页元素的透明
主要为大家介绍了CSS层透明实现方法,涉及filter:alpha属性的使用技巧,非常简单实用,需要的朋友可以参考下
filter: alpha(opacity=80); /* 其他 */ opacity: 0.8; RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到...
1.透明度: 如果没有为一个文本指定一个背景颜色或者一个背景图像,那么这个元素的背景通常是透明的。 这一点很重要,如果一个绝对...// transparency for older Mozillas filter:Alpha(opacity=75);//for IE 2.带有连
js里面设置DOM节点透明度的函数属性:filter= “alpha(opacity=” + value+ “)”(兼容ie)和opacity=value/100(兼容FF和GG)。 先来看看设置透明度的兼容性代码: 代码如下: function setOpacity(ele, opacity) {...
IE: filter:alpha(opacity) Mozilla: -moz-opacity Safari: -khtml-opacity 很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity。(新版Opera已经支持opacity) 所以以前用CSS设定一个...
你读DIV背景颜色透明度的设置是否熟悉,这里和大家简单分享一下,通常我们通过DIV的style样式属性filter来设置DIV背景透明样式,也可根据alpha提供的参数进行组合控制。 本节向大家爱描述一下如何设置DIV背景颜色...