如何创建无损且可重复使用的模糊/磨砂玻璃效果？

如何创建通用模糊背景，可用于多张图片，类似于下面的示例？

我需要一个白色的磨砂玻璃外观png，我可以将其设置为在常规图像上分层使用，以便为它们提供所有的磨砂玻璃外观（例如，您几乎可以分辨出其背后的含义；也许是一些颜色）。

例子：

^{点击图片获得全分辨率}

也许白色背景带有纹理（粒状纹理），然后进行高斯模糊处理，然后将其用作我所有图像的图层。

我知道我上面发布的链接可能只是一个模糊的图像，但是我需要一个可以在iOS项目中重用的图层。这样，它可以用作图像各部分上的视图层，并使下面的图像看起来模糊。也许我不应该在这里使用模糊作为术语。我正在寻找磨砂玻璃外观。

我要对此图像进行的操作是将其导入到我的iOS应用中，并使用它作为视图背景。然后，当此视图位于其他视图（地图视图，照片等）上方时，它们都会被磨砂。我正在尝试从iOS 7创建此图像的效果。不，我不想使用新的iOS 7设计功能，因为我的大多数用户仍在iOS 5上。不，我不想强​​迫他们升级。

您不能只覆盖模糊图像后面的“模糊”图像。模糊效果需要对后面的图像进行采样以转置/扩展像素，因此需要在此处应用。

但是，您可以制作沙质/粒状纹理，并将其用作乘法图层以获得颗粒状纹理外观。

更新-正如Derek在另一个答案中建议的那样，您可以通过将图像层转换为智能对象，然后对其应用模糊来进行非破坏性模糊。然后，您可以输入智能对象并独立于模糊对其进行编辑。

看一下您提供的第二张图像，使用PNG叠加无法实现类似的功能。这绝对是通过某种方式以编程方式完成的，而不是使用PNG叠加层。我尝试了这里发布的其他一些建议，但都没有达成共识（但也许您会获得好运）

这确实超出了您的要求，但这是否必须使用覆盖层来完成？我不确定使用这种方法能否获得希望的效果。如果您有能力，我将以编程方式进行。

我对应用程序的设置没有任何了解，但是可以使用CSS3过滤器来实现：

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[为清楚起见，请注意：该过程是带有alpha蒙版的产品的前景色，以及使用CSS滤镜模糊的背景图片]

之前

后

^{图片来源：Philip Leara}

您可以在此处查看现场演示

将来，使用建议的backdrop-filterCSS样式可以使此操作变得更加容易，但是当前对此的支持几乎不存在。

另一种选择是创建一个智能对象，并将模糊和效果应用于该智能对象。这样，仍然可以使您打开智能对象并更改其中的内容。

- -编辑 - -

由于我已经发布了上述答案，因此该问题已经过编辑和更改。现在的要求是在iOS应用程序中实现模糊处理，我建议使用代码进行模糊处理，这样它就可以影响您想要的任何图像。

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

有关此的更多信息，请访问：http : //notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

关于如何在Photoshop中制作模糊效果，Dribble上有几个不错的滤镜。也许这些对您也有帮助。我特别喜欢这种非破坏性的方式来取得效果。我知道已经有一些关于此的内容，但是这里是链接：

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

如果仍然有必要，我正在尝试达到相同的效果，但我没有。

我使用名为html2canvas和stackBlur的插件完成了此操作，在这里找到了它：http : //jsfiddle.net/WtQjY/201/。

我不是插件的作者。这仅是代码片段。我将其更改为更简单，更快：

。模糊{
    -webkit-filter：blur（7px）;
-moz-filter：blur（7px）;
-o-filter：blur（7px）;
-ms-filter：blur（7px）;
滤镜：blur（7px）;

}

//////////////////////////////////
//包括jQuery库
// jQuery
$ {document）.ready（{
$（'＃YourButton'）。click（{

$（'＃YourContainer'）。toggleClass（'blur'）;

}）;
}）;

它仍然很慢，但是可以用。

因此，我创建了自己想分享的脚本版本。我制作了两个背景图像，并将其中一个附加到子div，然后将清晰明了的版本附加到主要背景。只需将两个对象的背景设置为固定和居中，它们就会匹配。

这是一个演示：http : //www.palandforsale.us/frosted-glass/

如果我正确理解了您的问题，我认为您不会。“模糊”是一种在软件中执行的操作，每种操作都有自己的方式。草图如何应用模糊可能与Photoshop或Google Chrome浏览器不同。

因此，您无法导出带有“模糊”的图像。模糊总是与它背后的内容交互，并且不能从创建它的应用程序中导出。

1. 在要创建模糊和磨砂层的层上制作50％的灰色层。
2. 充满噪音，其数量取决于您的需要
3. 根据需要使用高斯模糊对其进行模糊处理。
4. 在该层上方，您可以添加一个曲线层，并通过下拉曲线层的白色端或黑色端来调整白色和黑色值。

这两层应该给出冷淡和模糊的效果。可以更改这两层的顺序。

创建一个复制图像并应用高斯模糊的动作。我相信，这是实现这一目标的唯一PS方法。