css：使用filter和backdrop-filter实现高斯模糊效果

在CSS中，filter属性可以应用于元素，以创建各种视觉效果，如模糊效果。但是，filter属性只能应用于元素本身，不能应用于其背景。因此，如果想要对背景应用高斯模糊效果，就需要使用backdrop-filter属性。

backdrop-filter属性可以让你为元素后面的区域添加图形效果（如模糊或饱和度调整）。它适用于元素背景的非标准图像或颜色。

下面是一个简单的例子，展示如何使用filter和backdrop-filter来实现高斯模糊效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect</title>
<style>
  .blur-box {
    width: 200px;
    height: 200px;
    background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    backdrop-filter: blur(5px); /* 背景模糊效果 */
  }
  .content {
    position: absolute;
    filter: opacity(0.7); /* 内容的透明度降低，避免过度遮盖 */
  }
</style>
</head>
<body>
<div class="blur-box">
  <div class="content">
    Blurred Background
  </div>
</div>
</body>
</html>

在这个例子中，.blur-box类定义了一个带有背景图片的容器，并使用backdrop-filter属性实现了背景的高斯模糊效果。同时，.content类中的文本被包裹在一个绝对定位的容器内，并使用filter属性的opacity函数降低了文本的透明度，以确保文本内容可读。

请注意，backdrop-filter属性可能不是所有浏览器都支持，因此在使用时请确保它在目标平台上有效。

css：使用filter和backdrop-filter实现高斯模糊效果

评论已关闭

推荐阅读