0

有没有用 模糊图像CSS，特别是背景？

4

3 回答 3

2

就在这里。
您可以使用两种不同的背景，一种具有鲜明的色彩（主图片），另一种是模糊的图片： 

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;
}

要查看详细教程，请单击此处

编辑：
对于图像，您可以使用 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”过滤器
    详细解释见这里
于 2012-04-15T11:38:22.437 回答
1

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

检查这个

于 2012-11-08T10:36:09.230 回答
0

这是不可能通过CSS 实现的。

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

于 2012-04-15T11:42:48.980 回答