通过浏览器调整大小来调整，移动和缩放图像和文本div

Question

我以为这是在Google中寻找的一个很常见的问题，但我似乎找不到答案。 任何帮助将不胜感激。

我有一个带有全尺寸可调整大小背景图像的网页。 像这样：

html
{
    background-size:contain;
    background: black url(../images/myimage.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}

在图像上，我有一个专门用于包含图像的z层DIV的部分和包含一些文本的另一个z层DIV的部分。

当我开始调整浏览器窗口大小时，我的页面DIV变得疯狂。 当页面及其背景图像越来越小时，它们实际上保持静止不动。

无论用户的屏幕分辨率如何或如何调整浏览器的大小，如何确保包含图像，链接和文本的DIV始终位于正确的位置。 CSS？ Javascript？ jQuery的？ 最好的方法是什么？

先感谢您 ！！！

ps请让我知道是否不清楚，需要样品。

Answer 1

CSS是您最好的选择。 您需要根据情况将div的位置设置为fixed ， absolute或relative 。 fixed将使该项目在用户滚动时保持其位置，而absolute将使该项目与页面的其余部分一起滚动，并且无论您是否告诉它在其他内容中，它都将移动到任何地方。 relative获取相对于其内部任何父容器元素或窗口本身（如果它不在另一个容器元素内部）的位置。

如果它是fixed或absolute ，则在用户调整窗口大小或取决于分辨率时，分配right将使其位置保持与屏幕右侧对齐，并且left ， top和bottom也将相应地起作用。 您可以为它们指定一个百分比，该百分比也将根据分辨率或调整大小而相应更改。 或者，您可以以像素，厘米，毫米，英寸等为单位分配硬编码值。这是一个jfiddle作为代码示例

Answer 2

我认为请执行以下操作：

• 从背景图像中删除多余的白色间距

• -从body标签中删除背景图片，并使用main div之类的内容，然后将所有内容放入其中
  它。

• -删除div'element1'并将背景色添加到'content1'div本身

• -要根据屏幕分辨率处理内容的定位，有两种方法：-1）使用CSS媒体查询2）使用css使用相对定位

• -如果您支持多种分辨率，那么使用Css媒体查询可能会变得乏味，因此请使用css相对定位。

例如

<div class="wrapper">
  <div class="content1">Content</div> 
</div> 

.wrapper{ position:relative; width:100%; overflow:hidden; background:url(yourBgImage.jpg);background-size:100% 100%;}
.content1{position:absolute; top:20%; left:10%;}