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/（絶対）vs http://jsfiddle.net/mYcXX/2/（固定）

于 2012-08-23T23:46:16.943 に答える
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 に答える
0

背景画像のスタイルをコンテナから分離することで、この問題を解決できると思います。私は間違っているかもしれませんが、このようなことを試してください...

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

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

できるだけドームの自然な流れに頼ることをお勧めします。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>

そして今..CSSでのこの素晴らしい経験の後、私は喜んでc＃に戻ると思います。

于 2012-08-24T02:05:56.487 に答える