2

我已经为此工作了几个小时，阅读了 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;}

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

4

4 回答 4

2

您的#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;}

还要记住 background-size:cover; 在 IE 版本中不起作用。

例子：

http://jsfiddle.net/mYcXX/1/（绝对）与http://jsfiddle.net/mYcXX/2/（固定）

于 2012-08-23T23:46:16.943 回答
0

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

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

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

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

于 2012-08-24T00:47:51.217 回答
0

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

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

html{  background-color:gray }

身体{ }

#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 体验之后。

于 2012-08-24T02:05:56.487 回答
0

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

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

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

于 2012-08-23T23:45:43.153 回答