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

我看不到任何背景图片，但据我所知， 2nd<div>不会在 1st 和 3rd 之间对齐<div>，因为您使用display:inline-block;的是display:inline;.

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

老实说，我不知道这对您的背景图片的位置有什么影响，因为您没有为图片设置完整的网址。
我会在您更改网址后立即进行调查。

于 2012-10-05T02:42:01.337 回答