0

だからここに私は以下のようなヘッダー画像を持っています

ここに画像の説明を入力

モニターの解像度のためにヘッダー画像を 100% に引き延ばすことを計画しました。これを達成するためのベスト プラクティスと方法は何ですか? 私はこれをやろうとしました:

.LippoHeader
{
background-image: url('../images/body/headerpng_BG.png');
background-repeat: repeat-x;
width: 100%;
height: 170px;
}
.shadowone
{
width: 100%;
position: absolute;
left: -1px;
top: 172px;
display: inline-block;
}
.shadowtwo
{
width: 100%;
position: absolute;
left: -1px;
top: 173px;
display: inline-block;
}
.shadowthree
{
width: 100%;
position: absolute;
left: -1px;
top: 176px;
display: inline-block;
}

私が追加しない限り、モニターに100％収まるように伸ばすことはできません（画像の解像度自体が許す範囲でのみ伸びます）：

位置: 絶対;

とにかくこれを行うことはありますか？可能であれば、それを追加したくないのですが、位置を絶対に設定しないように言われました。これは悪い習慣だからです

ヘッダーのスクリーン キャプチャは次のとおりです。 ここに画像の説明を入力

また、マスターページを使用したため、bodyタグはなく、divタグのみで、パネルヘッダーに.ascxを使用しました。コードは

<div class="LippoHeader">
  <div>
    <img src="images/body/shadow.png" class="shadowone" />
    <img src="images/body/shadow.png" class="shadowtwo" />
    <img src="images/body/shadow.png" class="shadowthree" />
  </div>
</div>
4

2 に答える 2

1

画像を繰り返してdiv、実際の個々の画像ではなくブラウザ ウィンドウの幅全体を占めるようにしたいので、htmlまたはbodyタグに余白がないことを確認する必要があります。提供されている jsFiddle を見ると、マージンを削除したくなるでしょう。

html,
body {
     margin: 0;
}
于 2013-07-26T07:06:38.150 に答える