CSS Alpha 通道滤镜
Alpha 通道滤镜会改变对象的不透明度,使其融入背景。
在此滤镜中可以使用以下参数 -
参数 | 说明 |
---|---|
不透明度 立即学习“前端免费学习笔记(深入)”; | 不透明度级别。 0 为完全透明,100 为完全不透明。 |
finishopacity | 对象另一端的不透明度级别。 |
样式 | 形状不透明度渐变。 0 = 均匀 1 = 线性 2 = 径向 3 = 矩形 |
startX | 不透明度渐变开始的 X 坐标。 |
startY | 不透明度渐变开始的 Y 坐标。 |
不透明度渐变结束的 X 坐标。 | |
完成 | 不透明度渐变结束的 Y 坐标。 |
示例
您可以尝试运行以下代码来实现 Alpha Filter -
现场演示
<html> <head> </head> <body> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" /> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)"> CSS Tutorials </div> </body></html>