css背景从左到右逐渐模糊

在CSS中，我们可以使用background-image属性来给元素设置背景图片，并使用filter属性来为背景图片添加模糊效果。通过一些简单的代码，我们可以将CSS背景从左到右逐渐模糊。

.blurry-bg {
  
   
   background-image: url("your-image.jpg");
  
   
   background-size: cover;
  
   
   background-position: center;
  
   
   height: 500px;
  
   
   filter: blur(0px);
  
   
   transition: filter 1s ease-in-out;
  
}
  
  .blurry-bg:hover {
  
   
   filter: blur(5px);
  
}
 

以上代码中的关键点是filter属性，其中blur()函数可用于给背景图片添加模糊效果，数值越大图片越模糊。CSS transition属性让过渡更生动，这样当鼠标悬停元素时，背景模糊效果将从0逐渐变为5。

需要注意的是，CSS滤镜不是在所有浏览器中都可以使用的。虽然大多数现代浏览器都能够支持，但仍然建议在做设计时，测试不同的浏览器以了解是否能够支持您的滤镜效果。