Home > Article > Web Front-end > CSS Alpha Channel Filter
CSS Alpha Channel Filter
- WBOYforward
- 2023-08-31 08:29:02997browse
#The Alpha channel filter changes the opacity of an object so that it blends into the background.
The following parameters can be used in this filter -
| Parameters | Description |
|---|---|
| Opacity | Opacity level. 0 is fully transparent, 100 is fully opaque. |
| finishopacity | The opacity level of the other end of the object. |
| Style | Shape opacity gradient. 0 = Uniform 1 = Linear 2 = Radial 3 = Rectangular |
| startX | The X coordinate where the opacity gradient starts. |
| startY | The Y coordinate where the opacity gradient starts. |
| The X coordinate where the opacity gradient ends. | |
| Complete | The Y coordinate where the opacity gradient ends. |
Example
You can try running the following code to implement Alpha Filter -
Live Demo
<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>The above is the detailed content of CSS Alpha Channel Filter. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete