Add filter effects to images in blog _ CSS/HTML

Add filter effects to images in blog

Use your own blog to test the skills in your colleagues' articles. First insert a test image:

Ultimate tip: Image: Adding filter effects to images

A pure-text blog may seem boring. A proper picture can make the page more beautiful and express your thoughts better. So how to add some special filter effects in Photoshop for images? Can I change images one by one? It is too cumbersome. In addition, we often reference the image address on the network and do not have the permission to modify the original image. Here is a simple method to modify the Display Effect of images on the blog.
Generally, the "insert image" function is available on the blog editing page, and the "Source code editing" mode is also available. Switch to the "Source code editing" mode, and we can see the html code of this blog. Find the code field of the inserted image and modify it, for example

< Img Alt = "" Src = "Http://p.blog.csdn.net/images/p_blog_csdn_net/unimoon/heibai.JPG" />

1. Transparent Effect
Format:

< Img Src = "Image address" Style = "Filter: Alpha (opacity = 100, finishOpacity = 0, style = 0 )" >

Or

< P Style = "Filter: Alpha (opacity = 100, finishOpacity = 0, style = 0); width: width; height: height" > < Img Src = "Image address" > P>

You can modify the attribute values.
Opacity: transparency at the beginning
FinishOpacity: transparency at the end
Style: 0, average transparency 1, linear transparency 2, circular transparency 3, diamond transparency

Effect:

Opacity = 50, finishOpacity = 0, style = 0

Opacity = 100, finishOpacity = 0, style = 1

Opacity = 100, finishOpacity = 0, style = 2

Opacity = 100, finishOpacity = 0, style = 3

2. Flip Effect
Left/right flip format:

<ImgSrc= "Image address"Style= "Filter: FlipH">

Or

<PStyle= "Filter: FlipH; width: width; height: height"> <ImgSrc= "Image address"> P>

Up/down flip format:

<ImgSrc= "Image address"Style= "Filter: FlipV">

Or

<PStyle= "Filter: FlipV; width: width; height: height"> <ImgSrc= "Image address"> P>

Effect:

3. Adjustment Effect
Gray tune format:

<ImgSrc= "Image address"Style= "Filter: Gray">

Or

<PStyle= "Filter: Gray; width: width; height: height"> <ImgSrc= "Image address"> P>

X-ray effect:

<ImgSrc= "Image address"Style= "Filter: Xray">

Or

<PStyle= "Filter: Xray; width: width; height: height"> <ImgSrc= "Image address"> P>

Color swap:

<ImgSrc= "Image address"Style= "Filter: Invert">

Or

<PStyle= "Filter: Invert; width: width; height: height"> <ImgSrc= "Image address"> P>

Effect:

4. Border Effect
Luminous:(Color is the luminous color code, strength is the luminous intensity, filter width = Image Width + luminous intensity x2
Filter Height = image height + luminous intensity x2 + 10)

<PStyle= "Filter: Glow (color = #4A7AC9, strength = 15); width: filter width; height: filter height"Align= Center> <Br> <ImgSrc= "Image address"> P>

Projection:(Color is the luminous color code, and the direction of 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)

<PStyle= "Filter: Shadow (color = #4A7AC9, direction = 135); width: filter width; height: filter height"Align= Center> <Br> <ImgSrc= "Image address"> P>

Shadow:(Color is the luminous color code, offX horizontal displacement offY vertical displacement (can be positive or negative), filter width = Image Width + absolute horizontal displacement value + 10, filter Height = image height + absolute vertical displacement value + 20)

<PStyle= "Filter: Dropshadow (color = #333333, offX = 5, offY = 5); width: filter width; height: filter height"Align= Center> <Br> <ImgSrc= "Image address"> P>

Fuzzy:(Direction (only a multiple of 45 degrees, for example, 45, 90, 135,180,225,270,315 degrees), filter width = Image Width + 15, Height = image height + 30)

<PStyle= "Filter: Blur (direction = 135); width: filter width; height: filter height"Align= Center> <Br> <ImgSrc= "Image address"> P>

Waveform:(Freq frequency (> 0) strength amplitude intensity (> 0) lightstrength peak intensity (0 ~ 100 the higher the blackening) phase start phase (0 ~ 100), filter width = Image Width + amplitude strength x2
Filter Height = image height + amplitude intensity x2 + 10)

<PStyle= "Filter: W *** e (freq = 7, strength = 9, lightstrength = 5, phase = 5); width: filter width; height: filter height"Align= Center> <Br> <ImgSrc= "Image address"> P>

Effect: