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

Question

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

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

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

绿色图像

Answer 1

我会将蜡烛制作成透明的 PNG 文件，这样我就不必费心构建蜡烛图像，使背景图像的条纹和点正确对齐。

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

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

图像本身将获得 position: relative; top:-50px(相应地调整)以向上移动到内容容器之外。