在CSS/HTML中重新定位圖片大小的文字

我一直在研究這個小時，並閱讀了超過20篇文章，但我仍然不知道如何做到這一點。我有一個背景，我希望文字能夠定位在某個地方。一切都很好，直到我在具有更高分辨率的顯示器上觀看它。背景重新調整大小，但文字已不在我想要的位置。在CSS/HTML中重新定位圖片大小的文字

這些圖像希望能夠清楚地描述我的情況。

我多麼希望文本看任何分辨率（這是一個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;}

我不是找一個固定的位置，因爲我將要增加的內容，所以我需要通過頁面沒有文本移動垂直滾動。

來源

2012-08-23 Movieboy

好的，我想出了自己，非常感謝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>

而且now..I想我會高興地回到C＃，這與CSS奇妙的經歷後。

來源

2012-08-24 02:05:56 Movieboy

很高興你找到了解決方案！您現在可以接受自己的答案，以便人們知道應該看哪個答案。 – Yisela

這看起來像固定佈局。如果是這樣，爲什麼只是不削減背景的中央部分，把它放在一個div風格：

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

以及與該容器中的第（股利）

來源

2012-08-23 23:45:43

感謝您的建議，我試過了，但它仍然沒有工作，也許我仍然做錯了什麼？我添加了我在編輯中所做的。 – Movieboy

你#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/（固定）

來源

2012-08-23 23:46:16 Yisela

感謝您的建議，我逐字逐字地提供了您輸入的內容，但仍然無效，可能我仍然在做錯事。 – Movieboy

我寫的只是想法，而不是最終的代碼。我建議你看一下css的職位，以充分了解他們的工作方式（這並不困難，但它很具體） – Yisela

是的，我現在就要這樣做。不過謝謝。這比c＃有時更令人頭疼...... smh。 – Movieboy

我相信你可以通過從容器中取出的背景圖像樣式解決這個問題。我可能是錯的，但嘗試這樣的事情......

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

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

我會建議依託the dom儘可能的自然流動。基本上，除非絕對必要，否則千萬不要依賴position: absolute。即使這樣它可能是一個黑客。

來源

2012-08-24 00:47:51

在CSS/HTML中重新定位圖片大小的文字

回答

相關問題