Filter:alpha (Opacity=opcity,finishopacity=finishopacity,
Style=style,startx=startx,starty=starty,finishx=finishx,
Finishy=finishy)
Wow, why so long. Yes, but these parameters have their own use.
Opacity represents transparency levels, with optional values ranging from 0 to 100, 0 for full transparency, and 100 for completely opaque. The style parameter specifies the shape characteristics of the transparent area. 0 of them represent the uniform shape, 1 represent linear, 2 represent radial, and 3 represent rectangles.
Finishopacity is an option that sets the transparency at the end to achieve a gradient effect, which is also from 0 to 100. StartX and Starty represent the start coordinates of the gradient transparency effect, and finishx and finishy represent the end coordinates of the gradient transparency effect.
As we can see from the above, if you do not set a transparent gradient effect, then just set the opacity this one parameter. Having said so much, let's take a look at an example (see chart below):
The code that implements this effect is as follows:
<title>alpha</title>
<style>//* defines CSS styles *//
<!--
Div{position:absolute; left:50;top:70; width:150;}
* Define the style within the Div area (position is absolute positioning, left, top, width coordinates) *//
img{position:absolute;top:20;left:40;
Filter:alpha (OPACITY=80)}
* Define the style of the picture, absolute positioning, Filter property is transparency for 80*//
-->
</style>
<body>
<div>
<p style= "font-size:48;font-weight:bold;color:red;" >
Beautiful </p>//* defines font properties, and the foreground color is red *//
</div>
<p> </p>
* Import a picture *//
</body>
If you make a minor change in the code above, you will have several other effects. We only modify the IMG style properties and change the IMG style attribute code in the head to look like this:
img{position:absolute;top:20;left:40;
Filter:alpha (opacity=0,finishopacity=100,
style=1,startx=0,starty=85,finishx=150,finishy=85);}
* Set transparent gradient effect, start coordinate, terminate gradient coordinate, and set transparent style value (style=1) as linear *//
This code produces the effect as shown in the bottom left, two images on the right are the effect of the value of the style parameter in Alpha to 2 and 3, click on the thumbnail to enlarge.
Style=1 style=2 style=3
The above is the CSS of the Alpha Filter properties of the application, the specific application also need to find an example of your own practice.
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
