途徑上如何佈局跨越兩個不同的背景圖片

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文件來查看綠色和粉紅色的圖案。