CSS画像の背景の位置

このようなレイアウトが必要です。あなたが見ることができるように、私はトップバーとフッターのバーを持っている画像を見てCSS画像の背景の位置

enter image description here

を取ってください。フッターバーはソリッドバーなので、divを使用して単色を塗りつぶすことができます。

しかし、トップバーの場合、div内の背景として画像を使用する必要があります。そして、ここにトップバーのイメージがあります。

enter image description here

がある私は何をしたい、黒い四角い箱（ロゴ）が右隅に固定しなければならないとバーが画面の幅に合わせて繰り返す必要があります。

トップバーのCSSを教えてください。ありがとうございました。

編集：私の不注意については申し訳ありません。ここに私のコードです。

<html> 
<head> 
</head> 
<body style="margin:0px"> 
<div style="width:100%; height:100%"> 
<div style="position:absolute; top:10px; background:url(bglogo.png); width:100%; height:100px"></div> 
<div style="position:absolute; bottom:0px; width:100%; height:20px; background:#000"></div> 
</div> 
</body> 
</html>

出典

2011-08-12 knightrider

私たちがあなたのために働くことを期待するのではなく、私たちがあなたの仕事を手助けできるように、あなたが試したコードをご記入ください。 – zzzzBov

申し訳ありませんが、私は自分のコードを追加しました。 – knightrider

あなたのコードを投稿してから私の答えは変わっていません。最初の行にdoctype（例えば '<！DOCTYPE html>'のようなもの）を追加すべきです。 – thirtydot

トップバー全体に画像を使用しないでください。それをちょうど下のバーと同じように扱いますが、いくつかの追加があります。

ロゴはクリック可能なリンクである必要がありますので、私が示唆しているとおりに行う必要があります。

HTMLは次のようになります。このCSSで

<div id="topBar"> 
    <a id="logo" href="/"><img src="logo.png" alt="whatever" /></a> 
</div>

：

#topBar { 
    position: relative; 
} 
#logo { 
    position: absolute; 
    top: -10px; 
    right: 0 
}

出典

2011-08-12 13:22:01 thirtydot

あなたが見ることができるように、正方形のボックス（ロゴ）の後に、もはやバーがないので、私がトップバーのイメージを使用した理由です。バーがロゴに当たったときに終了します。つまり、バーを使用していて、ロゴの四角いボックスをz-indexでラップしたとしましょう。右側には100％の棒が残っています。私はあなたが何を言っているのか理解することを願っています。私の悪い英語には申し訳ありません – knightrider

これはあなたがやろうとしていることですか？ http://jsbin.com/uleqes（「110」から「100」に変更して触れることができることに注意してください） – thirtydot

ああ、私が話そうとしていることは、私はこのようになりたくありません。http ：//imm.io/7Xbe私はバックグラウンドイメージの代わりにhtmlを使う。四角いボックスの右側の横に、私はいくつかのスペースが必要です。私はhtmlバーを使用する場合、それは私があなたに示すサンプル画像のようになります。私は正方形の箱の横に棒が欲しくない。 – knightrider

あなたは相対的な位置タグ内の絶対位置を使用することができ、あなたの黒い正方形のボックスを置くため。正確なピクセル配置を配置し、z-indexを設定して前のものを決定します。

ligneを置くには、負のマージンのボックスにclassを使用することもできます。

出典

2011-08-12 13:24:54 Phpascal

私がトップバーに画像を使用した理由は、あなたが見ることができるように、正方形のボックス（ロゴ）の後にもうバーがないからです。バーがロゴに当たったときに終了します。つまり、バーを使用していて、ロゴの四角いボックスをz-indexでラップしたとしましょう。右側には100％の棒が残っています。私はあなたが何を言っているのか理解することを願っています。私の悪い英語については申し訳ありません – knightrider

答えて

関連する問題