This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

filter

Filter is the filter attribute, which supports 10 filter functions.

blur

The blur() function creates a Gaussian blur effect on elements or images and supports arbitrary length values, but not percentage values. The parameter value of blur() function represents the standard deviation value of gaussian function, which can be understood as the number of pixels fused with each other on the screen. Therefore, the larger the parameter value of the function is, the more obvious the blur effect of the image is. Blur () can also be used to achieve radial blur or local blur.

.wrapper {
    filter: blur(6px);
}
Copy the code

When the number of pixels on the edge of the image is insufficient, the blur effect on the edge of the image is translucent, but if we do not want this effect:

<div class="wrapper">
    <img src="test.jpg" width="333" height="222">
    <span< / > blur functionspan>
</div>
<style>
.wrapper {
    width: 333px;
    height: 222px;
    overflow:hidden;
}
.wrapper img {
    filter: blur(6px);
}
</style>
Copy the code

In this way, we can see that the edges of the image are white and black if the image is on a black background. To solve this problem, we can add the same image without Gaussian blur or enlarge the image properly.

.wrapper img {
    transform: scale(1.1);
    filter: blue(6px);
}
Copy the code

This way the edges of the image will not appear translucent. If compatibility is not considered, we can use the Gorgeous-filter attribute to achieve a Gaussian blur effect. The edges will not be white by default.

brightness

The Brightness () function can be used to change the brightness of an element. The value can be percentage or value, from 0 to infinity. A parameter value of 0 or 0% indicates pure black, and a parameter value of 1 or 100% indicates normal brightness. 0, 1 or 0 100% brightness varies linearly. The brightness of the element increases as the parameter value is greater than 1 or 100%. The parameter value can also be null, which is equivalent to using the parameter value 1. If you want to reduce the brightness of the image in dark mode, you can use the Brightness function. Besides brightness and shading, the Brightness function can also be used to create black and white collocations.

.warpper {
    filter: brightness(3.6);
}
Copy the code

contrast

The contrast() function can be used to adjust the contrast of elements, and the parameter values can be percentages and values ranging from 0 to infinity. Parameter values of 0 or 0% indicate no contrast and appear as solid gray with a color value of #808080, or RGB (128,128,128). By pure gray, I mean the image will turn directly into a gray patch. A value of 1 or 100% indicates normal contrast. As the parameter value increases above 1, the contrast of the element increases. If the parameter value is null, the value is 1. In addition to adjusting the normal contrast, it can also be combined with other functions to achieve fusion viscosity effect.

filter: contrast(a); / / equivalent to thefilter: contrast(1);
Copy the code