backdrop-filter
时间: 2023-09-21 14:03:31 浏览: 59
The `backdrop-filter` CSS property allows you to apply visual effects to the area behind an element. This is often used to create a frosted glass effect or blur the background of an element.
The `backdrop-filter` property takes a filter function as its value, such as `blur()`, `brightness()`, `contrast()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, `sepia()`, and `drop-shadow()`.
Here's an example of how to use `backdrop-filter` to create a frosted glass effect:
```
.container {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding: 20px;
}
```
In this example, the `backdrop-filter` property is set to `blur(10px)`, which blurs the area behind the element by 10 pixels. The `background-color` property is set to a semi-transparent white color to create the frosted glass effect. The `border-radius` property rounds the corners of the element, and the `padding` property adds some space between the content and the border.