与css的被弄脏的背景图象

Question

无论如何使用CSS模糊图像，特别是背景？

Answer 1

是的，有。
您可以使用两种不同的背景，一种具有鲜明的颜色（主要图像）和另一种模糊的图像：

body  {
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap {
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}

To see the detailed tutorial click here

修改
对于图像，您可以使用svg过滤器，如下所示：
<feGaussianBlur>元素用于创建模糊效果：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg> 

• 元素的id属性定义了唯一的名称 过滤器
• 模糊效果由元素
定义
• in =“SourceGraphic”部分定义为该效果创建 整个元素
• stdDeviation属性定义模糊量
• 元素的filter属性将元素链接到 “f1”过滤器
  See here for detailed explanation

Answer 2

是的，过滤器有模糊图像的方式，您可以在链接中阅读更多相关信息。但它们还没有适用于所有浏览器！我没有找到让它们适用于背景图像的方法。

Check this

Answer 3

这不可能通过 CSS 来实现。

您必须使用服务器端语言处理图像并生成模糊图像，然后在CSS背景中使用它。