用css写背景模糊的三种情况

在CSS中，可以使用filter属性来实现背景模糊的效果。filter属性中的blur()函数可以对元素应用模糊效果。以下是三种不同的情况：

1. 模糊整个元素的背景（包括内容）：

.element {
  filter: blur(5px);
}

2. 模糊元素的背景，但保持内容清晰：

.element {
  filter: blur(5px);
  position: relative;
}
 
.element::before {
  content: '';
  position: absolute;
  top: -5px; /* 模糊边缘需要提前 */
  right: -5px;
  bottom: -5px;
  left: -5px;
  background: inherit;
  filter: blur(5px);
}

3. 对背景图像应用模糊效果：

.element {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  position: relative;
}
 
.element::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  filter: blur(5px);
  opacity: 0.5; /* 可选：增加透明度以便内容可见 */
}

在这些例子中，5px是模糊的程度，你可以根据需要调整这个值。第二种方法中使用::before伪元素来模拟没有模糊的内容，而::after伪元素则用于增加一个模糊的背景。第三种方法中，::after伪元素同时模糊背景并增加透明度，使得内容可以在模糊的背景之上可见。