“This is the fourth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Past links:

“Ingenious CSS Filters”

“Ingenious CSS Filters (2)”

preface

filter

First, as always, we’ll start with the original image.

// html
<img class="filter" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58bccb7dbd7d4a4e81d21d05b1cff64c~tplv-k3u1fbpfcp-zoom-1.image">
Copy the code

grayscale

Convert the image to grayscale. Arguments can be numbers or percentages. Is 0(0%), the picture does not change, is null time value is 1.

// css 
.filter { 
    filter: grayscale(.6) / *60%Gray * /}Copy the code

The image above is the converted image.

invert

Invert the tone of the image. The same parameter can be a number or percentage. When it is 0(0%), the picture does not change, and when it is 1 (100%), the picture color is completely reversed.

// css 
.filter { 
    filter: invert(100%);
}
Copy the code

Instead of using the image above, use a different one, because it looks a bit eerie when the color is reversed (θ ~ θ “).

  • The original image

  • Inverted image

opacity

Change the opacity of the image. The difference is that the performance of filter is better (￣▽￣)~*). Parameter and the above two sides, is 0 (0%), completely transparent, is 1 does not change.

// css 
.filter { 
    filter: opacity(.5);
}
Copy the code

saturate

Saturate or desaturate the image. Anything above 1 (100%) will saturate the image, and anything below 1 (100%) will desaturate the image.

// css 
.filter { 
    filter: saturate(4);
}
Copy the code

Well, that’s all for today. You are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!