CSS滤镜-alpha属性

2020-03-24 18:41:50

字体：大中小

来源：转载

供稿：网友

alpha是来设置透明度的。先来看一下它的表达格式： filter：alpha（opacity=opcity，finishopacity=finishopacity，
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 //*定义CSSyangshi_10628_1.html' target='_blank'>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
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,
//*设置透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（ > 这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果，点击缩略图可放大。 > 以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS实用教程（二）_0

下一篇：控制网页文件大小通过精简CSS实现