响应式网页设计-将图片和Div放在图片顶部的最佳或正确的方法是什么？

Question

我有一个新网站的“门户”的背景图像。在图像的顶部，需要有5个图像，放置在一个独特的模式，加上3个带有链接的文本的div。这是它需要的样子的图片:链接到门户http://dansdemos.info/clips/screenshots/portal.png的设计

门户需要在响应式设计中实现。

我已经尝试过相对和绝对定位，但我很难弄清楚这两种方法中的一种或两种是将这些较小的项目放在较大的项目上的正确方式。因此，我正在努力找出在图片顶部放置图像和黄色div的最佳方式。我的问题是:将图像和div放在门户的背景图像上的最佳方式是什么？

链接到实时门户网站的建设。http://dansdemos.info/prelaunch/WorldClothingCorp_QA/

我想我可以想出一些办法，但我真的想用“正确的方式”，或者至少是一种好的方式。

谢谢。

Answer 1

我以前也遇到过这种情况。

调整要放在顶部的图像的大小，使其与父(背景)图像的大小相同。所以把图片放在你想要的地方，让剩下的图片透明(png24，良好的透明度支持和较低的gif文件大小)。

使用您最喜欢的图像编辑软件：

创建与背景图像大小相同的画布，并将背景图像放置在画布中以供参考(如果可能，还应锁定层)

• 将覆盖图像和位置放入您想要的位置，并对另一个transparent

• Export background (参考)图像重复此操作，使画布将覆盖图像设置为PNG24<>G213>

在CSS中使用：

img { width: auto; max-width: 100%; }

…使图像具有响应性。现在，如果窗口调整大小，图像将响应您为页面容器指定的宽度。

有关响应式或“流畅”图像的更多信息，请单击此处：http://alistapart.com/article/fluid-images

Answer 2

我建议你在一个相对定位的div容器中放置你的背景图像。一旦你有了你喜欢的位置，你会做同样的事情将图像放在大图像的顶部，除非你想要绝对地定位它们。

Answer 3

HTML：

<div id="container>
   <img src="..." alt="Background Image" /> /* Big Image */
   <a href="..."><img src="..." alt="Jacket" /></a>
   <a href="..."><img src="..." alt="Skirt" /></a>
   <a href="..."><img src="..." alt="Top" /></a>
   <a href="..."><img src="..." alt="Dress" /></a>
   <a href="..."><img src="..." alt="Jacket 2" /></a>

   <a href="..." class="yellowflag">RETAIL STORE</a>
   <a href="..." class="yellowflag">WHOLESALE USED CLOTHING</a>
   <a href="..." class="yellowflag">WIPING RAGS</a>
</div>

CSS：

#container {position:relative;}
#container > img { width: 100%; }
#container img+a         {position:absolute; top:30%; left:30%;}
#container img+a+a       {position:absolute; top:50%; right:30%;}
#container img+a+a+a     {position:absolute; top:30%; right:30%;}
#container img+a+a+a+a   {position:absolute; top:30%; left:30%;}
#container img+a+a+a+a+a {position:absolute; top:80%; left:40%;}

#container .yellowflag 
{
  /* Retail Store */
  background-image: url(...); 
  position:absolute;top:...;left:...
}
#container .yellowflag+.yellowflag
{
  /* Wholesale */
  top:...;left:...;
}
#container .yellowflag+.yellowflag+.yellowflag
{
  /* Wiping rags */
  top:...;left:...;
}