【发布时间】：2012-12-04 12:15:04
【问题描述】：
我希望有一个带背景的 div，并且在其中有更多 div，它们的背景会在父背景上应用一些过滤器。由于对过滤器的支持不完全在这里，我想我将创建过滤后的图像，然后设置子级的background-position 属性，使背景与父级对齐。在 jQuery 中，我可以这样写：
$this.css('background-position', -$this.offset)
不使用 JavaScript 也能实现这个效果吗？通过将子背景设置为fixed，我几乎可以得到我想要的，但我当然不希望它们固定到视口，我希望它固定到父级。
为了给你一个更好的主意，这是我在 Gimp 中制作的一个快速模型：
编辑：我创建了JSFiddle，背景为fixed。
【问题讨论】：
-
+1。好问题。 @martin 你能为此创建一个 JSFiddle 吗？那么它应该会吸引更多的眼球......
-
只是具体一点.. 您是否正在寻找仅 HTML4 的解决方案？由于 HTML5 确实提供了可以执行上述操作的过滤器..
-
假设它是 HTML4 解决方案。 OTOH，即使是 HTML5 过滤器也有其局限性。如果第二张图片是一些花哨的 Photoshop 滤镜，比如 Edge detection 或 Posterize，那么您将很难使用 CSS 滤镜复制该外观。此外，它可能会影响性能，而加载两个图像很简单，并且让我可以完全控制用户看到的内容。
-
@KentPawar 过滤什么？我会对此感兴趣；编辑：我明白了，那些在 webkit nightly 中可用。