图片的display属性默认inline,而这个属性的vertical-align的默认值是baseline vertical-align:middle; 或者父盒子diaplay:flex;

@pretty-foam 不好意思，我没有表述清楚。项目里没用img标签，而是background-image。

background-size: 100%;

font-size:0

// 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

所以图片的高度尽可能在适应屏幕后, 不要出现小数, 就不会出现这个

@lincenying 谢谢你的回答。但我并没有用rem或其它自适应方案，就是px，所以不应该有小数点的问题吧？ 代码

@shuiRong 一样的, 因为要等比缩小, 你把cover属性去了, 你看还不会出出现1像素的白条

@lincenying 还是有

@shuiRong

你图片是1080的宽度,

模拟器1080宽度 模拟器1079宽度

只要浏览器宽度小于1080像素, 图片等比压缩后, 就可能出现白条 浏览器宽度>=1080, 图片不压缩, 就不会出现白条

这白条也就是背景颜色

@lincenying 明白了。谢老哥解惑。 白条问题解决后，立马又遇到个问题：两个图片下方重合的部分有痕迹。（我很奇怪，你上面第一张图就完全看不到痕迹）。 我更新了demo代码，把所有无关信息删掉了，只留下两块CSS。期待大佬提供思路。

目测是你这图片有半透明效果, 两个背景图片前面加个背景颜色