Please create a new file testimage.html
Note: Eleven filter effects for static images-Ie7 and non-ie browsers are not supported.
Welcome to the invitation month. net technology and software architecture
The content is as follows (you can modify it yourself ):Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> test the image effect </title>
<Style>...
. Filter1
{...}{
Filter: Alpha (opacity = 50, finishOpacity = 80, style = 0 );
}
. Filter2
{...}{
Filter: FlipH;
}
. Filter3
{...}{
Filter: FlipV;
}
. Filter4
{...}{
Filter: Gray;
}
. Filter5
{...}{
Filter: Xray;
}
. Filter6
{...}{
Filter: Invert;
}
. Filter7
{...}{
Filter: Glow (color = #4A7AC9, strength = 50 );
}
. Filter8
{...}{
Filter: Shadow (color = #000000, direction = 135 );
}
. Filter9
{...}{
Filter: Dropshadow (color = #000000, offX = 50, offY = 50 );
}
. Filter10
{...}{
Filter: Blur (direction = 135 );
}
. Filter11
{...}{
Filter: Wave (freq = 7, strength = 9, lightstrength = 5, phase = 5 );
}
</Style>
</Head>
<Body>
<Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td> source image <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Translucent <br/>
Opacity: transparency at the beginning. <Br/>
FinishOpacity: transparency at the end. <Br/>
Style: 0 indicates the average transparency. 1 indicates the linear transparency. 2 indicates the circular transparency. 3 indicates the diamond transparency. <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Flip left and right <br/>
</Td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Flip up/down <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Grayscale <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
X-ray <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Color swap <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Luminous border <br/>
Color indicates the luminous color code, and strength indicates the luminous intensity. The filter width = Image Width + luminous intensity x2, the filter Height = image height + luminous intensity x2 + 10 <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Projection border <br/>
Color indicates the luminous color code, and direction indicates the direction (only a multiple of 45 degrees, for example, 45, 90, 135,180,225,270,315 degrees). The filter width = the image width + 25, Height = image height + 40 <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Shadow border <br/>
Color indicates the luminous color code. offX indicates horizontal displacement. offY indicates vertical displacement (positive and negative). Filter width = Image Width + absolute horizontal displacement value + 10, filter Height = image height + absolute vertical displacement value + 2) <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Blur border <br/>
Direction indicates the Direction (only a multiple of 45 degrees, for example, 45, 90, 135,180,225,270,315 degrees), the filter width = the image width + 15, Height = image height + 30 <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
<Tr>
<Td> <br/>
Waveform border <br/>
Freq indicates the waveform frequency (> 0), strength indicates the amplitude intensity (> 0), and lightstrength indicates the peak intensity (0 ~ 100), phase indicates the start phase (0 ~ 100), filter width = Image Width + amplitude strength x2
Filter Height = image height + amplitude intensity x2 + 10 <br/> </td>
</Tr>
<Tr>
<Td> </td>
</Tr>
</Table>
</Body>
</Html>
The effect is as follows: