0

ブラウザのサイズに関係なく中央に表示される CSS 背景画像があります。使用されている画像は、ブラウザの幅全体には及びません。この場合、ブラウザのサイズに関係なく中央に配置される背景画像に対する位置を維持するために、CSS に背景画像とリンクを配置した div も必要です。

私は手を出しました。

position:relative;

しかし、それはすべての要素をカスケードし、私が探している特定の配置を許可しません。ここに私が取り組んでいるコードがあります。私の初心者の質問に対する洞察に感謝し、これがどのように動作するかを学ぶことを楽しみにしています。

このコードをさまざまなサイズのブラウザで表示すると、背景画像が幅全体に収まらない場合、要素はパーセンテージに設定されているため動き回ります。私はそれらがどこにでもとどまる必要がありますが、背景の中心にとどまります。これを CSS で記述する方法がわからず、しばらく苦労してきました。この特定の問題に関するガイダンスをありがとう。

body {
    background:#000 url(bg.jpg) no-repeat center 0;
}
#logo {
    margin: 0px 11%;
    padding: 0;
    position:absolute;
}
4

1 に答える 1

0

横に配置したい要素を div ~say container~ 内にグループ化し、背景を div に設定してみてください。次に、div ~container~ の位置を相対位置に設定し、中央に配置します。

次に、~container~div に対して絶対位置と上下左右のプロパティを使用して、他の要素を整列させます。

これがそのコードです

 <div id="container">
     <div id="element1"></div>
     <div id="element1"></div>
 </div>

<style type="text/css">
  #container {
      background:#000 url(bg.jpg) no-repeat center 0;
      width: 800px; height: 400px
      position: relative;
      top: 50%; left: 50%;
      margin-top: -200px; margin-left: -400px }
  #element1 {
      position: absolute;
      top: -30px; left: -20px;}
  #element2 {
      position: absolute;
      top: 410px; left: 820px;}
</style>
于 2012-07-27T22:21:01.773 に答える