CSS 图片背景 + 高斯模糊效果实现指南

要给图片添加背景和高斯模糊效果，可以使用 CSS 的 background-image 属性和 filter 属性来实现。

首先，给图片添加背景，可以使用以下 CSS 代码：

.image-container {
  background-image: url('your-image-url.jpg');
  background-size: cover;
  background-position: center;
}

在上面的代码中，将 .image-container 替换为你要添加背景的容器的选择器，并将 your-image-url.jpg 替换为你要设置的图片的 URL。background-size: cover; 将确保图片被完全覆盖，并根据容器的大小进行缩放，background-position: center; 将使图片在容器中居中显示。

接下来，给图片添加高斯模糊效果，可以使用以下 CSS 代码：

.image-container {
  filter: blur(10px);
}

在上面的代码中，blur(10px) 表示将图片进行 10 像素的高斯模糊处理。可以根据需要调整模糊程度，增加或减少像素值。

最后，将这两段 CSS 代码结合起来，添加到你的 CSS 文件中或直接写在 HTML 的 <style> 标签中即可。

<style>
  .image-container {
    background-image: url('your-image-url.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(10px);
  }
</style>

记得将 your-image-url.jpg 替换为你要设置的图片的 URL。然后，将 .image-container 应用到你的 HTML 元素上，以实现图片背景和高斯模糊效果。

<div class="image-container">
  <!-- Your content here -->
</div>

在上面的例子中，使用了 <div> 标签作为容器，你可以根据需要选择不同的 HTML 元素作为容器。