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

preface

The advent of CSS3 brings us a lot of amazing things, and one of the cool features is filter,

The effect of gaussian blur in the image above is achieved through filter. Let me see what makes him so amazing. GO GO GO!!

filter

Let’s start with an original image

That’s cool. Is there. It’s a cool batch. = ͟ ͟ ͞ ͞ ʕ • ̫ ͡ • ʔ

// html
<img class="filter" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90294544a3c944e5b2c2c6c174fdb57f~tplv-k3u1fbpfcp-zoom-1.image">

Copy the code

blur

Make the image achieve gaussian blur effect. Arguments can be specified as CSS length, but percentage values are not accepted. The value passed in indicates how many pixels on the screen fuse with each other. The higher the value passed in, the more blurred the image, and vice versa, the clearer the image. The default value is 0.

// css
.filter {
    filter: the blur (10px);
}
Copy the code

brightness

The image can be lightened or darkened, and all black when the parameter is 0% (0). Parameter is 100% (1) the image is unchanged. If the parameter is greater than 100%(1), improve the image brightness. The default value is 1.

// css
.filter {
    filter: brightness (0.4);
}
Copy the code

// css
.filter {
    filter: brightness (1.4);
}
Copy the code

contrast

Adjust the contrast of the image, the parameter is 0% (0) all black. Parameter is 100% (1) the image is unchanged. If the parameter is greater than 100%(1), improve the image brightness. The default value is 1. `

// css
.filter {
    filter: contrast(0.6);
}
Copy the code

// css
.filter {
    filter: contrast(1.6);
}
Copy the code

It’s really cool. You feel it? It’s so cool! (^o^)

Well, that’s all for today. You are still the best today. Bye Bye!!