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