Question

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

门户网站需要在响应式设计中实施。

我已经尝试过相对和绝对定位，但我无法弄清楚这些中的一个或两个是否是将这些较小的物品放在较大物品之上的正确方法。所以，我正在努力找出在图片顶部定位图像和黄色div的最佳方法。我的问题是：将图像和div放在门户的背景图像之上的最佳方法是什么？

建设直播门户链接。 http://dansdemos.info/prelaunch/WorldClothingCorp_QA/

我想我可以解决一些问题，但我真的希望以正确的方式做到这一点，或者至少是一个好方法。

谢谢。

Answer 1

我以前自己就是这种情况。

将要放在顶部的图像调整为与父（背景）图像相同的大小。因此，按照您想要的方式放置图像，使其余部分透明（png24，良好的透明度支持和较小的文件大小，如gif）。

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

创建与背景图像大小相同的画布
将背景图像放在画布上以供参考（如果可能，锁定图层）
根据需要放入叠加图像和位置
对其他叠加重复此操作
删除背景（参考）图像并使画布透明
将叠加图像导出为PNG24

在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:...;
}

Answer 4

正如Chawk所说，你想要在包含使用position：relative的背景图像的div中使用position：absolute来定位包含每个图像的div。通过这种方式设置它们，5个图像将相对于其父元素而不是全屏定位。

请注意，图像周围的div目前显示为块，这意味着它们占据了父元素的整个宽度。您可能希望为它们设置宽度并将它们显示为内联块以使事情更容易。

响应式网页设计 - 将图像和图像置于图像之上的最佳或正确方法是什么？

4 个答案: