首页css遮罩层高斯模糊

css遮罩层高斯模糊

时间: 2023-09-12 18:04:55 浏览: 211

要在CSS中创建一个高斯模糊的遮罩层，你可以使用`backdrop-filter`属性。这个属性可以应用不同的视觉效果，包括高斯模糊。首先，你需要创建一个带有背景图像或颜色的元素，然后为其添加遮罩效果。接下来，使用`backdrop-filter`属性并将其值设置为`blur()`来实现高斯模糊效果。以下是一个基本的示例代码： ```html <!DOCTYPE html> <html> <head> <style> .container { position: relative; width: 400px; height: 400px; } .image { width: 100%; height: 100%; background-image: url('your-image.jpg'); background-size: cover; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); /* 调整模糊程度 */ } </style> </head> <body> <div class="container"> <div class="image"></div> <div class="mask"></div> </div> </body> </html> ``` 在上面的示例中，`.container`是一个具有相对定位的容器元素，`.image`是一个带有背景图像的元素，而`.mask`则是一个绝对定位的遮罩层。通过为`.mask`元素设置`backdrop-filter: blur(10px);`，我们可以将其内容高斯模糊处理，模糊程度可以通过调整`blur()`函数的参数来设置。请注意，`backdrop-filter`属性在一些老旧的浏览器中可能不被支持，请确保在使用此属性时进行兼容性测试。

阅读全文