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

1. Transparent Effect
Format:

Or

<Div style = "filter: Alpha (opacity = 100, finishOpacity = 0, style = 0); width: width; height: high "> </div>

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:

Or

<Div style = "filter: FlipH; width: width; height: height"> </div>

Up/down flip format:

Or

<Div style = "filter: FlipV; width: width; height: height"> </div>

Effect:

3. Adjustment Effect
Gray tune format:

Or

<Div style = "filter: Gray; width: width; height: height"> </div>

X-ray effect:

Or

<Div style = "filter: Xray; width: width; height: height"> </div>

Color swap:

Or

<Div style = "filter: Invert; width: width; height: height"> </div>

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)

<Div style = "filter: Glow (color = #4A7AC9, strength = 15); width: filter width; height: filter height "align = center> <br> </div>

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)

<Div style = "filter: Shadow (color = #4A7AC9, direction = 135); width: filter width; height: filter height "align = center> <br> </div>

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)

<Div style = "filter: Dropshadow (color = #333333, offX = 5, offY = 5); width: filter width; height: filter height "align = center> <br> </div>

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)

<Div style = "filter: Blur (direction = 135); width: filter width; height: filter height "align = center> <br> </div>

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)

<Div style = "filter: W *** e (freq = 7, strength = 9, lightstrength = 5, phase = 5); width: filter width; height: filter height "align = center> <br> </div>

Effect: