CSS图像问题

Question

我有一些问题需要将3个图像放到背景中，我的意思是，我有一个图像在顶部，实际上是一个2000x550像素，然后我需要留下200px（垂直）并放置另一个覆盖的图像所有的中心和他们一个图像进入页脚。

你认为制作一个完整的图像更好吗？完全它大约30KB。或者有什么方法可以使用css来放置它？

亲切的问候

Answer 1

要回答如何放置标题图片的问题，最好的方法是定义一个具有指定高度的div（550px高标题对我来说似乎非常大，但是，嘿，它是你的网站）和宽度（可能设置为100％），并使用background-image css属性将图像放在那里。这样可以防止任何横向滚动。

Answer 2

您应该可以使用css z-index实现此目的。有关更多信息，请参阅以下链接：

W3C学校对z索引的解释： http://www.w3schools.com/Css/pr_pos_z-index.asp

来自Smashing Magazine的z-index的深入解释： http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 3

您要使用示例图像的示例将很好。从您的描述中可以看出您没有正确实现z-index。我的猜测是你需要声明你要添加z-index的div的位置。即使它是位置：相对，你仍然必须声明它或z-index不起作用。

- 编辑真实答案 -

在查看图像后，实际上并不难实现。我就是这样做的 -

1. 将BODY的背景设置为白色和绿色/粉红色/灰色背景：

   body {background：URL（images / green-pink-gray_bg.png）#fff no-repeat;}

2. 将DIV的背景设置为灰色图像 -

   div＃gray {background：URL（images / gray_bg.png）#fff no-repeat;}

没有必要设置任何东西的z-index，因为具有灰色背景的div已经在页面的BODY的“顶部”。使用具有透明背景的PNG图像将允许白色背景显示在其中一个背景图像未覆盖的任何位置。