The Alpha property of the CSS filter

Source: Internet
Author: User
Tags filter define
css| Filter Alpha is to set the 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 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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.