问题描述
我想将两个图像背景像素完美相邻。此功能在台式机上有效,但在移动设备上无效。
示例:
.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 通过切换到移动视图在调试器上对其进行检查。
那么,如何在移动设备上也完美地搭配这种船?
解决方法
您可以将包装器类设为黑色背景,以便图像可以融合。
尝试一下。
.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;
}
}