Question

我已经工作了好几个小时，阅读了20多篇文章，我仍然不知道该怎么做。我有一个背景，我希望文本定位在某个地方。一切都很好，直到我在具有更大分辨率的显示器上查看它。背景重新调整大小，但文本不再在我想要的地方。

这些图像有望清楚地描述我的情况。

我希望文本如何查看任何分辨率（这是在1440 x 900显示器上）http://dl.dropbox.com/u/9134840/demo/1.PNG

这是它在1080p显示器上的外观： http://dl.dropbox.com/u/9134840/demo/2.PNG

 <body>
  <div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
  </body>
</html>


body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}

编辑：我尝试了两种建议，使用div并绝对和相对地定位文本，但仍然不行，文本仍在移动。

#contain{
position:relative;
width:7000px;
margin:0 auto;}


#blah{font-size:large; left:100px; top:200px; position:absolute;}

我不是在寻找固定的定位，因为我将要添加内容，所以我需要在页面中垂直滚动，而不会移动文本。

Answer 1

您的#blah div需要位于相对div内。如果你绝对定位与身体有关的东西，你可能会遇到问题。将其放在另一个div中或使用固定定位。

#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}

<div id="containerDiv "><div id="blah"></div></div>

或者

#blah {position: fixed; top:200px; left:300px;}

在这种情况下，如果调整窗口大小，则div将始终保持相同的位置。如果您希望它居中，请使用以下内容：

#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}

还要记住背景大小：封面;将无法在IE版本中使用。

示例：

http://jsfiddle.net/mYcXX/1/（绝对）vs http://jsfiddle.net/mYcXX/2/（已修复）

Answer 2

这看起来像固定布局。如果是这样的话，为什么不切割背景的中心部分并将其放在带有样式的div中：

{
  width:960px; // maybe more or less - the width of the central image 
  margin-left:auto;
  margin-right:auto
}

并定位与该容器相关的段落（div）

Answer 3

我相信您可以通过将背景图片样式与容器分开来解决此问题。我可能错了，但尝试这样的事情......

body{
  background: url(black.png) top center no-repeat;
}

#container{
  width: 960px;
  margin: 0 auto;
}

我建议尽可能依赖 the dom 的自然流程。基本上，除非绝对必要，否则不要依赖position: absolute。即便如此，它可能也是一个黑客。

Answer 4

好的，我自己想出来了，非常感谢yisela的指导。最终，这就是我所做的。我看了一个网站，比如yahoo.com，看到他们把所有东西都集中在一起并且有一个白色的背景。所以无论你有什么分辨率，它仍然看起来很整洁。考虑到这一点，我确保我的图像是灰色的，并将背景更改为灰色，以便将它们混合在一起。

现在，至于容器的东西。我将图像单独放在一个容器中，并将其居中。然后我只是设置相对于容器的段落。这样文本将保持相同的位置。

html{  background-color:gray }

body {}

#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png); 
}

#blah{font-size:large; left:120px; top:230px; position:relative;}



<div id="blah">

<p id="pr">This is a paragraph!</p>




</div>



</div>
  </body>
</html>

现在......我想我会很高兴回到c＃，经过CSS的精彩体验。

使用CSS / HTML中的Image Re-size重新定位文本

4 个答案: