Detailed explanation of CSS blur properties: filter and backdrop-filter

Detailed explanation of CSS blur attributes: filter and background-filter

Introduction:
When designing web pages, we often need some special effects to increase the visual appeal of the page . The blur effect is one of the common special effects. CSS provides two blur attributes: filter and backdrop-filter, which are used to blur element content and background content respectively. This article explains these two properties in detail and provides some concrete code examples.

1. Filter attribute

The filter attribute is used to blur element content. It can achieve a variety of different effects, including Gaussian blur, brightness adjustment, contrast adjustment, and more. Below are some commonly used filter attribute values ​​and their effects.

1. Gaussian blur (blur): This attribute can be used to add a blur effect to the element. The larger the value, the greater the blur.

.blur {
  filter: blur(5px);
}

2. Brightness adjustment (brightness): The brightness of the element can be adjusted through this attribute. Values ​​less than 1 darken, values ​​greater than 1 lighten.

.brightness {
  filter: brightness(0.5);
}

3. Contrast adjustment (contrast): The contrast of the element can be adjusted through this attribute. Values ​​less than 1 reduce contrast, values ​​greater than 1 increase contrast.

.contrast {
  filter: contrast(2);
}

4. Invert color effect (invert): This attribute can be used to add an inverse color effect to the element.

.invert {
  filter: invert(100%);
}

5. Hue rotation (hue-rotate): This attribute can rotate the hue of the element.

.hue-rotate {
  filter: hue-rotate(90deg);
}

2. Background-filter attribute

The background-filter attribute is used to blur the background content of the element. Its usage is similar to the filter attribute, but it works on the background of the element rather than the content of the element itself. Below are some commonly used backdrop-filter property values ​​and their effects.

1. Gaussian blur (blur): This attribute can be used to add a blur effect to the background of the element. The larger the value, the greater the blur.

.backdrop-blur {
  backdrop-filter: blur(5px);
}

2. Brightness adjustment (brightness): You can adjust the background brightness of the element through this attribute. Values ​​less than 1 darken, values ​​greater than 1 lighten.

.backdrop-brightness {
  backdrop-filter: brightness(0.5);
}

3. Contrast adjustment (contrast): This attribute can be used to adjust the background contrast of the element. Values ​​less than 1 reduce contrast, values ​​greater than 1 increase contrast.

.backdrop-contrast {
  backdrop-filter: contrast(2);
}

4. Invert color effect (invert): This attribute can be used to add an inverse color effect to the background of the element.

.backdrop-invert {
  backdrop-filter: invert(100%);
}

5. Hue rotation (hue-rotate): This attribute can rotate the background hue of the element.

.backdrop-hue-rotate {
  backdrop-filter: hue-rotate(90deg);
}

Conclusion:
The filter and backdrop-filter properties of CSS provide us with a rich selection of blur effects, making the design of the web page more colorful. By rationally using these attributes, the page can present a cooler effect. However, it should be noted that different browsers may have compatibility issues when using these attributes, so compatibility testing is required in actual use to ensure consistent effects.

Reference link:

• [MDN Web Docs: filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
• [MDN Web Docs: backdrop-filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)

The above is the detailed content of Detailed explanation of CSS blur properties: filter and backdrop-filter. For more information, please follow other related articles on the PHP Chinese website!