0

私の背景画像は、このコードの div 間で整列しません。それらをクリアしようとしましたが、役に立ちませんでした。誰がそれを引き起こしているのか、またはどうすればそれを機能させることができるのか知っていますか? 便宜上、HTML の CSS。

<div class="header" style="height:200px; background-image: url(bg.png); margin:-8px;">
<img src="logo.png" style="margin-left:auto; margin-right:auto;" />
</div>

<div style="text-align:center;">
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:90px; border-bottom-left-radius: 20px;">Div 1</div>
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:400px;margin:-4px;">Div 2</div>
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:90px;border-bottom-right-radius: 20px;">Div 3</div>
</div>

ここにフィドルがあります：http://jsfiddle.net/FphKk/

画像: http://i.imgur.com/YLVpI.png

4

2 に答える 2

1

マージンがdivをシフトしているため、背景がストライプのずれを引き起こしています。

余白なし:ここでフィドル

設定された幅でコンテナ div を作成することに加えて、インライン ブロックを追加し、マージンを削除しました。そうしないと、ウィンドウ幅に基づいてストライプがずれます。

ここでフィドル

于 2012-10-05T03:10:13.153 に答える
0

背景画像は見えませんが、私が知る限り、<div>.<div>のdisplay:inline-block;代わりにdisplay:inline;.

http://jsfiddle.net/bcnobel/FphKk/1/

画像に完全なURLを設定していないため、これが背景画像の位置に何をするのか正直に言えません。
URLが変わったらすぐに調べます。

于 2012-10-05T02:42:01.337 に答える