覆盖两个div时显示奇怪的线条

Question

我正在尝试在page1和page2之间创建一个<div>的自定义拆分器，但有一些奇怪的行显示我不知道它们来自哪里，或者如何隐藏它们！

spiltter.png

pattern1.png Snippedshot

 .zikzak, .splitter, .split-content
 {
    float:left;
    width:100%;
 }
 .splitter
 {
    height:250px;
 }
 .split-content
 {

    margin-top:-50px;
    height:250px;
    background:url(img/pattern1.png) repeat;
 }
 .zikzak
 {
    position:relative;
    height:50px;
 }

HTML：

 <div class="splitter">
    <div class="zikzak" style="background:url(img/spiltter.png) repeat-x"></div>
    <div class="split-content"></div>
    <div class="zikzak" style="background:url(img/spiltter2.png) repeat-x"></div>
 </div>

Answer 1

您的图像问题spiltter.png由于图像边缘透明不牢固，这就是您获得奇怪行为的原因。

要解决此错误，您必须使用纯色填充图像边缘。