Add a filter effect to a picture in a blog _css/html

With the skills of colleague articles, use your own blog to test. First insert a test picture:

An image of the ultimate tip: Add a filter effect to a picture

A text-only blog will look dull, and proper mapping can make the page more beautiful and better able to express your thoughts. So how do you add some special filter effects in Photoshop to your pictures? Do you want to change the picture in a single sheet? Too cumbersome, not to mention many times we are referring to the network image address, and there is no modification of the original image permissions. Here's an easy way to modify the display of images on your blog.
The General blog editing page has "Insert Picture" function, in addition to "source code editing" mode, switch to "source code editing" mode, we can see the HTML code of the blog post. Find the Code field of the inserted picture, modify it, for example

< img alt ="" src = "Http://p.blog.csdn.net/images/p_blog_csdn_net/unimoon/heibai.JPG" />

1. Transparency effect
Format:

< img src = "Picture Address" style = "Filter:alpha (opacity=100,finishopacity=0,style=0)" >

Or

< Div style = "Filter:alpha (opacity=100,finishopacity=0,style=0); width: wide; Height: High" >< img src = "Picture Address" > Div>

The properties involved are modified to correspond to the values
Opacity: Transparency at the beginning
Finishopacity: Transparency at the end
style:0, average transparent 1, linear transparent 2, round transparent 3, diamond transparent

Effect:

To Opacity=50,finishopacity=0,style=0

To Opacity=100,finishopacity=0,style=1

To opacity=100,finishopacity=0,style=2

To Opacity=100,finishopacity=0,style=3

2. Rollover effect
Flip format left and right:

<imgsrc= "Picture Address"style= "Filter:fliph">

Or

<Divstyle= "FILTER:FLIPH; width: wide; Height: High"><imgsrc= "Picture Address"> Div>

Flip format up/down:

<imgsrc= "Picture Address"style= "FILTER:FLIPV">

Or

<Divstyle= "FILTER:FLIPV; width: wide; Height: High"><imgsrc= "Picture Address"> Div>

Effect:

3. Pitch effect
Gray format:

<imgsrc= "Picture Address"style= "Filter:gray">

Or

<Divstyle= "Filter:gray; width: wide; Height: High"><imgsrc= "Picture Address"> Div>

X-Ray effect:

<imgsrc= "Picture Address"style= "Filter:xray">

Or

<Divstyle= "Filter:xray; width: wide; Height: High"><imgsrc= "Picture Address"> Div>

Color Swap:

<imgsrc= "Picture Address"style= "Filter:invert">

Or

<Divstyle= "Filter:invert; width: wide; Height: High"><imgsrc= "Picture Address"> Div>

Effect:

4. Border effect
Glow: (color is the luminous color code, strength is the luminous intensity, the filter width = Figure width + luminous intensity x2
Filter height = Figure Height + luminous intensity x2+10)

<Divstyle= "Filter:glow (color= #4A7AC9, strength=15); width: filter width; height: Filter High"Align=center><BR><imgsrc= "Picture Address"> Div>

Projection: (color is the luminous color code, direction direction (can only be multiples of 45 degrees such as: 45,90,135,180,225,270,315), filter width = width of Figure +25)
Discard mirror height = figure height +40)

<Divstyle= "Filter:shadow (color= #4A7AC9, direction=135); width: filter width; height: Filter High"Align=center><BR><imgsrc= "Picture Address"> Div>

Shadow: (color is the luminous color code, OFFX horizontal displacement Offy vertical displacement (can be positive negative), filter width = width + Horizontal Displacement absolute value +10, filter height = figure Height + Vertical Displacement absolute value +20)

<Divstyle= "Filter:dropshadow (color= #333333, offx=5,offy=5); width: filter width; height: Filter High"Align=center><BR><imgsrc= "Picture Address"> Div>

Blur: (Direction direction (can only be multiples of 45 degrees such as: 45,90,135,180,225,270,315 degrees), filter width = figure width +15, discard mirror height = figure height +30)

<Divstyle= "Filter:blur (direction=135); width: filter width; height: filter height"Align=center><BR><imgsrc= "Picture Address"> Div>

waveform : (Freq frequency (>0) strength amplitude strength (>0) Lightstrength crest strength (0~100 higher, darker) phase start phase (0~100), filter width = width + Amplitude strength x2
Filter height = Figure Height + amplitude strength x2+10)

<Divstyle= "filter:w***e (freq=7,strength=9,lightstrength=5,phase=5); width: filter width; height: filter height"Align=center><BR><imgsrc= "Picture Address"> Div >

Effect:

