Question

在我的网页上，背景是一个大图像，顶部横幅有一些溢出到背景的元素。横幅和背景应无缝对接。

无论我做什么，都有1个像素将横幅与背景上的其他图像分开。

CSS

/* body layout */
body {
    background: url(../images/background-home.jpg) no-repeat top center; 
    margin: 0;
    padding: 0;
    color: #404e54;
}

/* top banner */
#banner{
    width:980px;
    height:423px;
    background-image:url(../images/top-banner.jpg);
    background-position:top left; /* I tryed changing this - the image is 980px*/
}

/* main container */
.container {
    width:980px; 
    margin:0 auto;
}

基本页面布局：

...
</head>
<body>
<div class="container">
<div id="#banner"></div>
...
</div>
</body>
...

我会尝试加载图片以显示问题，如果还不够好，会尝试在某处加载示例。

Answer 1

用于计算以margin: 0 auto;为中心的元素位置的算法可能与用于计算top center背景中图像位置的算法不同;通常，当余数宽度不是偶数个像素时，问题是半像素舍入的工作方式不同。

通常这会影响IE最差。如果您尝试通过包含1px慢跑来“修复”它，您可能最终会在其他一些窗口大小和浏览器中未对齐。

根据横幅布局的工作原理，可能的修复方法是使其成为带有top center背景图像的100％宽度div，即水平复制正文背景，以便始终应用相同的舍入。否则，在你的图像中建立1px的定位余地是可能的......如果你正在处理透明的PNG，通常会更容易。

Answer 2

猜测我会说背景图像本身就是1px（或偏离中心）的图像 - 尽管你应该在不同的分辨率和缩放级别上检查它，以查看像素是否实际上在不同的屏幕上对齐尺寸 - 它可能只是背景图像位置的“中心”与980px宽“容器”div的居中之间的圆角差异。

要获得横幅，如果在不同的屏幕尺寸下，它是一个恒定的1px差异，请将position: relative添加到容器中，然后left: 1px或left: -1px;，具体取决于您的像素的方式进行。

这实际上会使整个容器1px偏离中心，但不太可能引人注意，也不会像图像错位那么多;）

定位图像以与背景无缝融合的问题

2 个答案: