html - 在 CSS/HTML 中使用图像调整大小重新定位文本

标签 html css position

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

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

最佳答案

您的 #blah div 需要放置在相对 div 内。如果你绝对定位与 body 相关的某些东西,你可能会遇到问题。将其放置在另一个 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/ (绝对)与 http://jsfiddle.net/mYcXX/2/ (已修复)

关于html - 在 CSS/HTML 中使用图像调整大小重新定位文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12101429/

相关文章:

html - 如何将一个 DIV 类放置在另一个 DIV 类之上的特定位置?

战舰游戏中舰船的定位算法

html - 如何增加导航栏的高度

html - SEO:<button> 与 <a> HTML 标签

javascript - 在元素的实例上附加函数

javascript - 使用jquery隐藏三个按钮中的两个

javascript - 创建一个像圆形的披萨

javascript - 分区是空的。使用 jQuery...错误?

javascript - 将 100 件元素放入圆形容器中,使用 javascript 均匀分布

css - 如何通过屏幕高度而不是浏览器高度设置高度