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？最好的方法是什么？

提前谢谢!!!

P.S。如果不清楚并且需要样品，请告诉我。

Answer 1

Css是你最好的选择。您需要将div的位置设置为fixed，absolute或relative，具体取决于具体情况。当用户滚动时，fixed将使项目保持其位置，而absolute将导致项目与页面的其余部分一起滚动，并且无论是否在内部内容，都会转到您告诉它的任何地方其他。 relative获取它相对于其内部的任何父容器元素的定位，或者如果它不在另一个容器元素内，则为窗口本身。

如果是fixed或absolute，如果用户重新调整窗口大小或取决于分辨率，则分配right将使其位置与屏幕右侧保持一致，left 1}}，top和bottom也会相应地采取相应行动。您可以为它们分配一个百分比，也会根据分辨率或调整大小进行相应更改。或者您可以指定一个以像素为单位的硬编码值，厘米，毫米，英寸，etc...这是一个jfiddle代码示例

Answer 2

在我看来，请执行以下操作：

从背景图片中删除多余的空白
- 从body标签中删除背景图片并使用主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%;}

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

2 个答案: