Alpha is used to set transparency. Let's take a look at its expression format:
Filter: alpha (opacity = opcity, finishopacity = finishopacity,
Style = style, startX = startX, startY = startY, finishX = finishX,
FinishY = finishY)
Wow, why is it so long. Yes, but these parameters have their own advantages.
Opacity indicates the transparency level. The optional values range from 0 to 100. 0 indicates full transparency, and indicates full Opacity.
The Style parameter specifies the shape features of the transparent area. 0 represents a uniform shape; 1 represents a linear shape; 2 represents a radial shape; 3 represents a rectangle.
Finishopacity is an option used to set the transparency at the end to achieve a gradient effect. Its value also ranges from 0 to 100.
StartX and StartY represent the starting coordinates of the gradient transparency effect, and finishX and finishY represent the ending coordinates of the gradient transparency effect.
From the above, we can see that if you do not set the transparent gradient effect, you only need to set the opacity parameter. After talking about this, let's look at an instance (see the figure below ):
The code for implementing the above effect is as follows:
<Html>
<Head>
<Title> alpha </title>
<Style> // * define CSS styles *//
<! --
Div {position: absolute; left: 50; top: 70; width: 150 ;}
// * Define the style in the DIV area (the position is absolute positioning, and the coordinates of left, top, and width )*//
Img {position: absolute; top: 20; left: 40;
Filter: alpha (opacity = 80 )}
// * Define the image style and absolute position. The filter attribute is set to 80 *//
-->
</Style>
</Head>
<Body>
<Div>
<P style = "font-size: 48; font-weight: bold; color: red;">
Beautiful </p> // * defines the font attributes. The foreground color is red *//
</Div>
<P> </p>
// * Import an image *//
</Body>
</Html>
If the code above is slightly modified, it will produce other effects. We only modify the style attribute of img, and change the Img style attribute code in head to the following:
Img {position: absolute; top: 20; left: 40;
Filter: alpha (opacity = 0, finishopacity = 100,
Style = 1, startx = 0, starty = 85, finishx= 150, finishy = 85 );}
// * Set the transparency gradient effect, start coordinate, end gradient coordinate, and set the transparency style value (style = 1) to linear *//
The results produced by this code are shown in the following figure on the left. The two pictures on the right show the effect of setting the Style parameter value in Alpha to 2 and 3 respectively. Click the thumbnail to zoom in.
The above is the application of the Alpha filter attribute of CSS. You need to find an example to practice it.
