【前端学习——css】css实现给背景的图片加模糊

在CSS中，可以使用filter属性来实现背景图片的模糊效果。filter属性中的blur()函数可以对图片进行模糊处理。

以下是一个简单的例子，演示如何给背景图片添加模糊效果：

/* 应用于整个页面的背景图片模糊效果 */
body {
  background-image: url('background.jpg'); /* 设置背景图片 */
  filter: blur(5px); /* 应用模糊效果，数值越大，模糊程度越高 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

请注意，当你对元素使用blur()时，整个元素包括其内容都会被模糊处理。如果你只想模糊背景图片而保持内容清晰，你可以为背景图片单独创建一个伪元素，并在该伪元素上应用模糊效果。

/* 仅应用于伪元素的背景图片模糊效果 */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(5px); /* 应用模糊效果 */
}
 
/* 确保主要内容不受模糊影响 */
body {
  position: relative;
}

这样，模糊效果就只会作用于伪元素，而不会影响到body元素内的其他内容。