有关如何布局跨越两个不同背景图像的图像的方法

Question

寻找有关如何在html / css中实现以下设计的一些提示和技巧：

蜡烛是一幅图像。绿色背景是包含其他元素的div的平铺背景，而粉红色背景是整个页面的背景。

如何将蜡烛图像放置在带有绿色bg的div内部，然后火焰的小突出部分为其bg粉红色图案？请注意，粉红色的图案是整个页面的bg。

绿色图片

Answer 1

我会把蜡烛变成透明的PNG文件，所以我不必经历构建蜡烛图像的麻烦，蜡烛图像的背景图像的条纹和点正确对齐。

如果您使用Alpha透明度，这可能会在IE6中产生问题，但有相关的解决方法。

然后我将蜡烛放在一个带有float: left或position: absolute的容器中（取决于布局的其余部分），位于绿色区域的左侧。

然后，图像本身会position: relative; top: -50px（相应地调整）以向内移动到内容容器之外。

Answer 2

尝试this example。

对于图像，您需要一个透明的png或gif文件来查看绿色和粉红色图案。