html - 背景图像 1px 偏移

Question

我正在开发我的第一个网站，但我遇到了像素移动位置的问题。

这是我的 html:

 <section class="hero-section text-center">

  <div class="container">
    <h1>Monetize Your Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <button class="btn btncta"><a href="#">Start Your <strong>Free</strong> Trial</a></button>
    <p class="small">Available On</p>
    <i class="fa fa-windows fa-2x"></i>
    <i class="fa fa-apple fa-2x"></i>
    <i class="fa fa-linux fa-2x"></i>
  </div>

</section>

<section id="features">
  <div class="row">
    <div class="col-md-4 text-center">
      <div class="feature-inner">
        <i class="fa fa-search fa-4x "></i>
        <h3>Search Anywhere</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="learnmore-a">Learn More ></p>
      </div>
    </div>

CSS(不是全部):

.hero-section{
    padding: 100px 0 70px 0;
    background: @color-herosec url('../images/hero_bg.png') no-repeat center bottom;
    width:100%;
 }

#features{

     background: url(../images/separator-inverted.png) no-repeat top center, url(../images/separator.png) no-repeat bottom center;
     padding:50px 10px 50px 10px;
}

结果应该是这个，但是没有在这些分隔符上移动 1px:

https://www.dropbox.com/s/zbxbhr1iqsz6b6j/Screenshot%202014-10-01%2021.02.28.png?dl=0

我试过这个修复:

html {
    margin-left: -1px;
    overflow-Y: scroll;
}

但结果仍然是移动的背景图像(移动较少但仍然有位移):

https://www.dropbox.com/s/mxklaez760vvbmk/Screenshot%202014-10-01%2021.04.45.png?dl=0

有人知道如何修复这个奇怪的错误吗？

我看过有关 div 宽度和图像宽度的内容，但我没有掌握它也没有起作用。

致以诚挚的问候

Answer 1

好的，您的问题有多种可能性和答案，我在本地 Bootstrap 版本中进行了尝试，它运行良好。似乎您还有其他影响输出的东西，所以这里还有另一种方法来实现您想要的:

1) 将图像剪切成一个完整的圆(不是像现在这样的半圆)，使其透明，这样圆的中心将是蓝色，外部是白色，就像您所做的一样 2) 在顶部和底部 div 之间添加一个 div(请注意，此方法也可用于导航目的)。为它添加一个类名。 3) 假设您的圆圈图像是 100px 并且您的 div 名称是“interstitial”，那么您的 CSS 将是:

.interstitial{width:100%; height:100px; background:transparent url(circle.png) no-repeat 50%; top:-50px}

好了，一个可靠的跨浏览器方法让分隔符在两个 div 之间工作。

但是，你可能会发现你会在你的final元素中以一个完整的圆圈结束(我不知道你是否会继续使用它)，所以如果你打算在更多的div中使用它，那么你想要“削减”它，只需将 div 名称更改为(比如)interstitial2，然后:

.interstitial2{width:100%; height:100px; background:transparent url(circle.png) no-repeat top center; top:-50px}

是的，它比我昨天给你的直接解决方案更复杂一些，但是好吧，既然你有问题，这里你有一个没有问题的解决方案。