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）在你的top和bottom div之间加一个div（注意这个方法也可以用于导航目的）。为它添加一个类名。 3）让我们假设您的圆圈图像是100px而您的div名称是“interstitial”，因此您的CSS将是：

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

然后你去了，一个防弹的跨浏览器方法让这个分隔符在两个div之间工作。

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

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

是的，它比我昨天给你的直接解决方案更复杂，但是，好吧，既然你遇到了问题，那么你就可以解决问题。

背景图像1px移位

1 个答案: