The Alpha filter is used to set the opacity of an image or text. It is to mix a target element with the background. In other words, it is the transparency of an element. By specifying coordinates, you can specify the transparency of points, lines, and surfaces.
Syntax: filter: alpha (parameter 1 = parameter value, parameter 2 = parameter value ,...)
Description: The Alpha attribute includes many parameters, as shown in the following table.
Alpha attribute parameter settings
Parameters |
Meanings and values |
Opacity |
Transparency level. The default range is from 0 to 100, indicating the percentage of transparency. That is to say, 0 indicates completely transparent, and 100 indicates completely opaque. |
Finishopacity |
Is an optional parameter. To set the transparency of a gradient, you can use this parameter to specify the transparency at the end. The range is from 0 to 100. |
Style |
The parameter specifies the shape features of the transparent area. 0 represents a uniform shape, 1 represents a linear shape, 2 represents a radial shape, and 3 represents a rectangle. |
Startx |
Representing the starting X coordinate of the gradient transparency effect |
Starty |
Representing the starting y coordinate of the gradient transparency effect |
Finishx |
The X coordinate of the gradient transparency effect. |
Finishy |
The Y coordinate of the gradient transparency effect. |
Instance code:
Code <HTML>
<Head>
<Title> set the transparency of the image </title>
<Style>
<! --
H2 {
Font-family: ""; font-size: 15pt}
Body {font-size: 12pt}
. Alphaall {filter: alpha (opacity = 50 )}
. Alpharad {
Filter: alpha (opacity = 0, finishopacity = 100, style = 2, startx = 0, starty = 5, finishx = 200, finishy = 185)
}
-->
</Style>
</Head>
<Body>
<H2> The following shows the effects of different Alpha filters on the same image </H2>
<Table
Border = 1 bordercolor = "#660000" cellpadding = 5 width = 600
Align = "center">
<Tr Height = 30>
<TD> source image </TD>
<TD> set the overall transparency of 50% </TD>
<TD> set a radioactive gradient transparency effect </TD>
</Tr>
& Lt; tr Height = 240 & gt;
<TD> </TD>
<TD> Src = "pic08.jpg"> </TD>
<TD> Src = "pic08.jpg"> </TD>
</Tr>
</Table>
</Body>
</Html>
Source: Anhui PHP community http://bbs.hfphp.org/thread-772-1-1.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
