0

私の問題の簡単な例:

私の問題の実例

特定の幅のページを作成しようとしていますが、ヘッダー画像を Web サイトの残りの部分の左側に 50 ピクセル拡張したいと考えています。

少し我慢してください。

以下のコード スニペットは、現在の html と css を示しています。

<body>
  <div id="header">
  </div>
</body>

body: {
  background-color: #FDFBDC;
}
#header {
  background: transparent url('images/headerforweb.png') no-repeat -50px 0;
  margin-left: auto;
  margin-right: auto;
}

私が達成しようとしているのは、画像が #header div の左に 50px 拡張されることです。ただし、#header を中央揃えにしたいので、左右の余白を auto に設定する必要があります。また、「？」の距離はクライアントの画面サイズにもよるのでわかりません。

問題は、私のアプローチでは、画像を #header の背景として設定すると、余分な 50px が切り取られることです。周りを見回したところ、背景画像はその要素のサイズを超えて拡張できないことがわかりました。

また、ページの全幅に拡張するラッパー div で #header を囲み、その背景として画像を設定しようとしました。ただ、その場合、画像背景の左余白として設定するには「？」を知る必要があるのですが、知ることは不可能です。

他の考えはありますか？

4

3 に答える 3

3

これを行うには、画像をヘッダーの子にし、負の余白を左に使用します。

このjsfiddleのように

<div id="header">
  <div id="image">
  </div>
</div>​

#header { 
    margin: 0 auto;
    width: 400px;
    background: red;
    height: 80px;
}

#image {
    margin-left: -50px;
    background: blue;
    width: 300px;
    height: 50px;
}​
于 2012-11-14T15:04:38.197 に答える
1

または、画像を運ぶ囲んでいるdivでposition：relativeを使用します。

body: {background-color: #FDFBDC;}
#header {
color:#ccc;
width:800px;
height:600px;
margin-left: auto;
margin-right: auto;
}

div.header_image { position:relative; left:-50px; top:0px;      background:url(images/headerforweb.png) 0 0  no-repeat;}



<div id="header">
<div class="header_image"> 
<h1>CONTENT</h1>
<h2>MORE CONTENT</h2>
<h3>MORE CONTENT</h3>
</div>
</div>
于 2012-11-14T15:59:00.023 に答える
1

ヘッダーに別のスパンを含め、背景画像をそのスパンに渡します。position:relative を #header に追加します。position:absolute;left:-50px;top:0 を新しく作成されたスパンに変更します。

于 2012-11-14T15:04:44.560 に答える