CSS背景图像对齐问题答案

【问题标题】：CSS background-image alignment issueCSS背景图像对齐问题
【发布时间】：2012-10-05 11:10:13
【问题描述】：

我的背景图像不会在此代码中的 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

【问题讨论】：

标签： html css image background

【解决方案1】：

您的边距正在移动 div，因此它们的背景会导致条纹错位：

无边距：Fiddle here

除了创建具有设定宽度的容器 div 之外，还添加了内联块并删除了边距 - 否则条纹会根据窗口宽度不对齐。

Fiddle here

【讨论】：

虽然我将如何将所有这些对齐到页面的中心？以及如何使标题 div 跨越整个页面（100%）？抱歉，我发现这非常繁琐，无论我更改什么都会破坏其他内容。
整体设计很“hinky”。您最好使用单个背景图像并围绕两个底角。像这样：jsfiddle.net/NotInUse/FphKk/6 但不知道你为什么最初以你的方式创建东西，我正在调整你的代码，而不是重新配置它。

【解决方案2】：

我看不到任何背景图片，但据我所知，第二个<div> 不会在第一和第三个<div> 之间对齐，因为您使用的是display:inline-block; 而不是display:inline;。

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

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

【讨论】：

好的，所以我添加了背景图像并将html和css分开（只是因为我认为这样更清楚）。另外，是否有logo.png 的完整网址？这是你想要的吗？ jsfiddle.net/bcnobel/FphKk/2
很遗憾没有。您是否看到 div 1、2 和 3 上的背景条纹仍然未对齐？我需要以某种方式对齐它们。