CSS两个背景图片不适用于移动设备

Question

我想将两个图像背景像素完美相邻。此功能在台式机上有效，但在移动设备上无效。

示例：

    .header{      
        background: url(https://stammalanen.de/wp-content/themes/alanen/images/mapHeaderBg.jpg);
        background-repeat: no-repeat;
      height: 216px;
    }
    .main{
        background: url(https://stammalanen.de/wp-content/themes/alanen/images/mapContentBg.jpg);
        background-repeat: repeat-y;
      height: 257px;
    }

    <div class="wrapper">
        <div class="header"></div>
        <div class="main"></div>
    </div>

jsfiddle 通过切换到移动视图在调试器上对其进行检查。

结果： 有一条细线

那么，如何在移动设备上也完美地搭配这种船？

Answer 1

您可以将包装器类设为黑色背景，以便图像可以融合。

尝试一下。

    .header{      
        background: url(https://stammalanen.de/wp-content/themes/alanen/images/mapHeaderBg.jpg);
        background-repeat: no-repeat;
        height: 216px;
        background-position: center bottom;
        background-size: contain;
    }

    .main{
        background: url(https://stammalanen.de/wp-content/themes/alanen/images/mapContentBg.jpg);
        background-repeat: repeat-y;
        height: 257px;
        background-position: center;
        background-size: contain;
    }

    .wrapper{
        background-color: #000;
    }

    @media(max-width: 767px){
        .wrapper{
            margin-top: -100px;
        }
    }