时间戳

首页 > 解决方案 > 如何用 flexbox div 填充背景图像

css - 如何用 flexbox div 填充背景图像

问题描述

我有一个要完全填充背景图像的 div。不应显示鲑鱼色。如何让此图像“缩放以适应”？我尝试了各种方法，例如 background-size: 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;
}

标签： cssflexbox

解决方案

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

推荐阅读