图像顶部的控件

时间:2013-04-10 00:35:29

标签: css css3

我已经搜索过,但找不到一个好的答案。

  • 我需要在图像上放置一些控件,即文本框和两个按钮。
  • 图像设置为页面宽度的100%,高度由浏览器自动调整。
  • 控件需要与图像的确切位置对齐,并且也要按照相关大小进行调整。

你可以看到我正在谈论的图像here。我认为这个位置是不言自明的。

如果需要,我可以没有控制尺寸,但确实需要定位。

由于

1 个答案:

答案 0 :(得分:1)

您可以将position:fixedposition:absolute@media queries的组合用于输入和按钮的宽度。因此,当您的图像调整大小时,您的控件将保持相同的位置。例如,position:absolute; left:10%; top:20%;

话虽如此,当你可以通过创建responsive design来节省加载时间并拥有实际可用的东西时,拥有一个巨大的图像是没有意义的。就像现在一样,这个图像无法在手机中读取,而且,你的输入会变得很小!

@media queries将允许您针对不同的屏幕分辨率(和像素密度)使用不同的样式。在您的情况下,您可以拥有桌面的当前布局,并开始为iPad和较小的移动设备一个接一个地移动元素。因此,对于智能手机,您可以使用此布局中的元素(320px宽度):

  • 标志
  • 菜单
  • 视频/图片
  • 登录/注册按钮
  • footer 1
  • footer 2
  • footer 3