使用CSS实现模糊的圆圈背景

HTML代码示例：

CSS代码示例：

.blurry-circles {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(https://picsum.photos/800/600);
  height: 100vh;
  width: 100%;
  position: relative;
}

.blurry-circle {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  filter: blur(50px);
}

.blurry-circle:nth-of-type(1) {
  top: 20%;
  left: 10%;
  width: 200px;
  height: 200px;
}

.blurry-circle:nth-of-type(2) {
  top: 50%;
  right: 5%;
  width: 300px;
  height: 300px;
}

.blurry-circle:nth-of-type(3) {
  bottom: 10%;
  left: 20%;
  width: 150px;
  height: 150px;
}

上述代码使用CSS创建一组模糊的圆圈背景，其中 blurry-circles 为容器元素，包含三个 blurry-circle 元素。每个圆圈使用绝对定位放置在不同的位置，并通过 filter 属性实现模糊效果。您可以自由调整圆圈的位置和大小来创建不同的背景效果。