Computer >> Computer tutorials >  >> Programming >> CSS

CSS Alpha Channel filter


The Alpha Channel filter alters the opacity of the object, which makes it blend into the background.

 The following parameters can be used in this filter −

Parameter
Description
Opacity
Level of the opacity. 0 is fully transparent, 100 is fully opaque.
finishopacity
Level of the opacity at the other end of the object.
Style
The shape of the opacity gradient.
0 = uniform
1 = linear
2 = radial
3 = rectangular
startX
X coordinate for opacity gradient to begin.
startY
Y coordinate for opacity gradient to begin.
Finish
X coordinate for opacity gradient to end.
Finish
Y coordinate for opacity gradient to end.

Example

You can try to run the following code to implement 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>