0

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

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

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

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

我想我可以弄清楚一些事情，但我真的想以“正确的方式”来做这件事，或者至少是一个好方法。

谢谢你。

4

4 回答 4

1

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

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

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

  1. 创建与背景图像相同大小的画布
  2. 将背景图像放在画布中以供参考（如果可能，锁定图层）
  3. 放入您想要的叠加图像和位置
  4. 对其他叠加层重复此操作
  5. 移除背景（参考）图像并使画布透明
  6. 将叠加图像导出为 PNG24

在 CSS 中使用：

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

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

有关响应式或“流体”图像的更多信息：http: //alistapart.com/article/fluid-images

于 2013-07-10T21:09:16.077 回答
0

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:...;
}
于 2013-07-10T21:02:36.243 回答
0

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

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

于 2013-07-10T21:12:48.807 回答
0

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

于 2013-07-10T20:57:46.920 回答