css背景图模糊

CSS中的背景图模糊效果是一种非常实用的效果，可以为网站增加视觉上的层次感和美观度。实现方法也非常简单，只需要使用CSS中的filter属性即可。

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

上面的代码中，我们使用了blur函数，并给定了参数5px来实现模糊效果。这一效果不仅可以应用到背景图上，同样可以应用于图片、文字等元素上。

除了模糊效果外，filter属性还可以实现其他效果，例如亮度、对比度、饱和度、灰度等，这些效果都可以通过在不同的CSS选择器上应用filter实现。

.brightness{
  
   
   filter: brightness(150%);
  
}
  
  .contrast{
  
   
   filter: contrast(150%);
  
}
  
  .saturate{
  
   
   filter: saturate(150%);
  
}
  
  .grayscale{
  
   
   filter: grayscale(50%);
  
}
 

附上一张实际应用的背景图模糊效果图。

.blur{
  
   
   filter: blur(10px);
  
   
   background-image: url('bg.jpg');
  
   
   background-size: cover;
  
   
   background-position: center;
  
}