Question

我正在寻找一个解决方案，如何将div定位到背景上的确切位置。我有一个背景图像（http://www.jewelryplatform.com/coming-soon.jpg），我需要在图像的中心放置整个div与表格等，在那里你可以看到那个框。图像将使用窗口大小调整大小的第二个问题。有什么简单的方法可以做到吗？

Answer 1

你对css和媒体查询有多少经验吗？

您可以在css中添加断点，然后为该断点处的元素指定特定样式。

#formDiv{ position: absolute; left 50%; top:50%}
@media only screen and (max-width: 995px) {
   #formDiv{ position: absolute; left 25%; top:25%}
}

Answer 2

我创建了一个fiddle，它会将表单保留在div的中心。

关键是对left: 50%作为将其居中的形式，然后负边距 - 留下其宽度的一半以保持其中心。这同样适用于top: 50%。因为所有内容都使用百分比定位，所以当您调整框大小时它将移动。

如前一个响应中所述，您还可以使用媒体查询来调整不同分辨率的表单大小。

<强>更新

此外，您还可以考虑在屏幕尺寸更改时调整背景图像的大小。这可以通过再次设置background-size属性100％来实现。 Here是如何使用它的绝佳资源

如何将div元素定位到背景上的精确点

2 个答案: