filter
The filter property is applied to the element itself, allowing you to apply graphic effects such as blur, shadow, color adjustment, etc. to the content of the element (including its child elements). This helps achieve visual effects commonly found in image editing software. Its basic syntax is as follows:
element {
filter: none | <filter-function> [ <filter-function> ]* | <url>;
}none: no filter effect.<filter-function>: filter function, common ones include:blur(px): blur effect, parameter is blur radius (pixel value).brightness(%): brightness adjustment, parameter is percentage (0% darkest, 100% normal, more than 100% brighter).contrast(%): contrast adjustment, parameter is percentage (0% lowest, 100% normal, more than 100% higher).grayscale(%): Grayscale conversion, parameter is percentage (0% no grayscale, 100% full grayscale).hue-rotate(deg): Hue rotation, parameter is degree.invert(%): Color inversion, parameter is percentage (0% no inversion, 100% full inversion).opacity(%): Opacity adjustment, parameter is percentage (0% completely transparent, 100% completely opaque).saturate(%): Saturation adjustment, parameter is percentage (0% no color, 100% normal, more saturated than 100%).sepia(%): Sepia conversion, parameter is percentage (0% no sepia, 100% full sepia).drop-shadow(h-shadow v-shadow blur spread color): Add shadow effect, parameters are horizontal offset, vertical offset, blur radius, shadow extension distance and color.
.filtered-element {
filter: grayscale(50%) brightness(150%) drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
}backdrop-filter
The backdrop-filter property is similar to filter, but it is applied to the background of an element and the content behind it (i.e. other elements behind the element), rather than the element itself. This allows you to apply filter effects such as blurring and color adjustment to the background of an element while keeping the element content clearly visible. Its basic syntax is the same as filter.
.backdrop-filtered-element {
backdrop-filter: blur(10px) brightness(75%);
/* Other styles (such as background color, transparency, etc.) to ensure the filter effect is visible */
background-color: rgba(255, 255, 255, 0.9);
opacity: 0.9;
}The background of .backdrop-filtered-element is blurred by 10px and adjusted to 75% brightness. In order to make the filter effect visible, a semi-transparent white background color and an element opacity of 0.9 are also set.
The filter and backdrop-filter properties provide the ability to apply graphic filter effects to element content and element background, respectively. By flexibly using these filter functions, you can add rich and diverse visual effects to web page elements. It should be noted that filter effects may affect performance, especially when dealing with large or complex elements, and should be used reasonably and tested for compatibility with different browsers.
