css背景图片

Question

嗨我有一个1px的png文件，我试图将其设置为两个div水平相邻的div的背景图像.html和css如下： -

<div id='one'>hi</div>
<div id='two'>hello</div>

css就像这样

div {
    width: 50%;
    height: 50%
}
#one, #two {
    background-image: url(/images/image.png);
    background-repeat: repeat;
}

现在问题出现在两个div之间，当设置图像时会自动出现黑色边框。我不希望这两个div被视为单独的块。请帮助。我对css很新，需要帮助： - ）！

Answer 1

我愿意打赌您正在使用的图像具有Alpha透明度（即图像部分透明），您所看到的是两个div之间的一个像素重叠。要么确保容器的宽度是偶数个像素，要么将div放在另一个容器中并使用背景上的背景。

Answer 2

像罗伯特一样，我也没有获得边界，但我确实得到了一些重复。 看看这是否适合你：

#one, #two{
    background-image:url(99785.jpg);
    background-repeat: no-repeat;
    borders: 0
    }

Answer 3

问题是由几个相互作用的东西引起的。

首先，确保您使用的是html strict doctype。这将有助于缓解div周围的浏览器之间的许多格式问题。有关要使用的真实文档类型的说明和列表，请参阅alistapart;有关详细比较，请参阅quirksmode。

其次，您很可能必须将div的边距设置为0.浏览器具有不同的默认设置。严格的doctype将缓解大部分问题，但通常还有其他方面需要克服。

此外，您可能想要获取firefox的firebug并利用chromes开发工具。 firebug实际上会显示所有边距/填充/其他所有内容的设置。 Chrome工具不会为您提供详细的图片，但您可以看到计算样式部分中的边距/填充/等等。