如何用flexbox div填充背景图像

Question

我有一个div，我想完全用背景图像填充。不应显示三文鱼的颜色。如何将此图像转换为"；缩放以适应"；？我尝试过各种方法，比如背景大小：100%100%和flexbox。

https://codepen.io/2spacemilk/pen/zYKWLyM

.this-div {
background-color: salmon;
display: flex;
flex-direction: column;
align-items: center;
background-image: url('https://i.imgur.com/6aRX4Hh.png');
background-size: cover;
}
.payment-methods-strip {
background-color: #fff;
max-width: 438px;
border-radius: 40px;
padding: 10px 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}

Answer 1

问题似乎是背景图像顶部有透明空间。因此，图像正在显示，它只是被额外的不可见空间向下推。你能试着从图片中删除多余的空间吗(使用图片编辑器(？如果没有，可以尝试使用background-position手动将其定位到顶部。