filter: alpha(***);

Browser
  • IE
Type
  • Extension

The alpha filter sets the opacity of the element.


#example {
filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=200, finishy=200);
}
Attribute Value Explanation
style 0 - 3 the style of the opacity gradient
0 = uniform
1 = linear
2 = radial
3 = rectangular
opacity 0 - 100 the opacity level for opacity gradient start
0 = fully transparent
100 = fully opaque
finishopacity 0 - 100 the opacity level for opacity gradient end
0 = fully transparent
100 = fully opaque
startx X coordinate the X and Y coordinates for opacity gradient start
(for the linear style)
starty Y coordinate
finishx X coordinate the X and Y coordinates for opacity gradient end
(for the linear style)
finishy Y coordinate

Example

The original

<img src="image/friend.gif" alt="IMG" width="170" height="140">
Output

IMG


<div style="font: bold 170% sans-serif; width: 100%;">
Example text
</div>
Output
Example text
The uniform style

<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=0, opacity=30);">
Output

IMG


<div style="font: bold 170% sans-serif; width: 100%; filter: alpha(style=0, opacity=30);">
Example text
</div>
Output
Example text
The linear style

<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=0, finishopacity=100);">
Output

IMG


<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=100, finishopacity=0);">
Output

IMG


<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=85, starty=0, finishx=85, finishy=140);">
Output

IMG


<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=170, finishy=140);">
Output

IMG


<div style="font: bold 170% sans-serif; width: 7em; filter: alpha(style=1, opacity=0, finishopacity=100);">
Example text
</div>
Output
Example text
The radial style

<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=2, opacity=100);">
Output

IMG


<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=2, opacity=0, finishopacity=100);">
Output

IMG


<div style="font: bold 170% sans-serif; width: 7em; filter: alpha(style=2, opacity=100);">
Example text
</div>
Output
Example text
The rectangular style

<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=3, opacity=100);">
Output

IMG


<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=3, opacity=0, finishopacity=100);">
Output

IMG


<div style="font: bold 170% sans-serif; width: 7em; filter: alpha(style=3, opacity=100);">
Example text
</div>
Output
Example text