这是PC端的图：
这是移动端的图（使用PC端Chrome开发工具里的模拟手机功能，但实测真机上问题同样存在）
这是真实项目中的图：（上面两张图是我把真实项目中bug之外的要素全删的结果。）
看到中间的白线条了吗？ P.S. 项目里没用img标签，而是background-image。 很奇怪的问题。我通过调整div的height可以在某个值时消除此线条，但设计原因我又不能调整高度。 代码很简单，在这里【注意HTML里面的图片用的是Imgur的图床，因此可能翻墙才能展示。】 这个布局是有点奇怪，可能改变布局能解决此问题。但我现在非常想知道为什么移动端会出现这个问题？怎么造成的？
我做过的尝试：加背景色，会减轻白色线条影响，但仔细看，依旧是能看到白线的。 提前谢谢大家！
图片的display属性默认inline,而这个属性的vertical-align的默认值是baseline vertical-align:middle; 或者父盒子diaplay:flex;
// css
body {
margin: 0;
}
#DIV_4 {
height: 578px;
background: rgba(0, 0, 0, 0) url(https://i.imgur.com/P9xxsyg.png) center
no-repeat;
}
// html
<div id="DIV_1">
<div id="DIV_4"></div>
</div>
上面的回复全部都不在点上, 真正的原因是, 图片适应屏幕时, 高度出现了小数点
比如一张图片 750x398的图片, 用rem自适应, { width: 7.5rem; height: 3.98rem; } 在6plus上浏览, 那么这张图片会被适应成 414 x 219.696
所以图片的高度尽可能在适应屏幕后, 不要出现小数, 就不会出现这个
你图片是1080的宽度,
模拟器1080宽度
模拟器1079宽度
只要浏览器宽度小于1080像素, 图片等比压缩后, 就可能出现白条 浏览器宽度>=1080, 图片不压缩, 就不会出现白条
这白条也就是背景颜色
@lincenying 明白了。谢老哥解惑。 白条问题解决后，立马又遇到个问题：两个图片下方重合的部分有痕迹。（我很奇怪，你上面第一张图就完全看不到痕迹）。 我更新了demo代码，把所有无关信息删掉了，只留下两块CSS。期待大佬提供思路。
