`
newleague
  • 浏览: 1471598 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

CSS滤镜(Filter)应用实例集锦-alpha滤镜

CSSFirefoxHTMLXHTML 
阅读更多

http://www.csscss.org/csssample/200951992.shtml

 

 

alpha滤镜是设置对象透明度效果的滤镜,本文通过多个CSS滤镜Filter属性alpha的实例,详细介绍CSS的alpha滤镜语法。首先让我们来了解下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代表渐变透明效果的结束坐标。

应用实例
我们采用的图片素材是

应用实例1:鼠标移动到图片上时图片变亮,鼠标离开图片时图片呈现雾色变暗效果。

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
</style>
</head>
<body>
<img alt="CSS在线DEMO" src="/uploadfile/200905/19/1554522229.jpg" width="300" height="200"
style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50" />
</body>
</html>

备注：其中 this.filters.alpha.MozOpacity=0.5 是为了在firefox重正确显示Alpha属性 效果

应用实例2:设置style分别为1,2,3显示出的不同的效果,代码如下:

[CSS在线]-示例代码<img alt="powerbookg4.jpg" src="/uploadfile/200905/19/1554522229.jpg" width="150" height="100" style="filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,finishx=150);" />
<img alt="powerbookg4.jpg" src="/uploadfile/200905/19/1554522229.jpg" width="150" height="100" style="filter:alpha(opacity=0,finishopacity=100,style=2);" />
<img alt="powerbookg4.jpg" src="/uploadfile/200905/19/1554522229.jpg" width="150" height="100" style="filter:alpha(opacity=0,finishopacity=100,style=3);" />
 

StartX、StartY、FinishX、FinishY只有当Style设置为1即渐变效果时才起作用。

应用实例3: 渐渐隐去的跑马灯

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
#box{width:300px;height:20px;background-color:#000;vertical-align:middle;padding:5px}
.alpha1 {color:#fff;filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50,FinishX=0;background-color:#333333};
</style>
</head>
<body>
<div id=box>
<marquee border="0"scrollamount="2" direction="left" scrolldelay="90" behavior="scroll" class="alpha1" >跑马灯内容1,2,3,4,5,6,7,8,9</marquee>
</div>
</body>
</html>

效果如下

 

CSS代码

[CSS在线]-示例代码#box{width:300px;height:20px;background-color:#000;vertical-align:middle;padding:5px}
.alpha1 {color:#fff;filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50,FinishX=0;background-color:#333333};
 HTML代码

[CSS在线]-示例代码<div id=box>
<marquee border="0"scrollamount="2" direction="left" scrolldelay="90" behavior="scroll" class="alpha1" >跑马灯内容1,2,3,4,5,6,7,8,9</marquee>
</div>

本文来自CSS在线：http://www.csscss.org/csssample/200951992.shtml

分享到：
| Hibernate分页查询小结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics