css - 2 带图像的背景颜色

Question

我正在尝试用图像做两种背景颜色(黑色和灰色)。黑色还可以，图像也可以。但是缺少灰色...

我的积木有问题吗？

谢谢

.image-item-2-03{
	float: left;
	height: 390px;
	object-fit: cover;
	width: 40%;
}

.background-black{
	background-color: #222222;
	position: absolute;
	width: 65%;
}

.background-grey{
	background-color:grey;
	position: absolute;
	width: 100%;
}

<div class="background-black">
<img class="image-item-2-03" src="https://zupimages.net/up/19/13/alfk.jpg" alt="">
<div class="background-grey">
</div>
</div>

Answer 1

问题不是很清楚，但是如果你想要图像左边的灰色背景，右边的黑色，那么你需要稍微重新排列 block 。我使用内联 block 而不是绝对定位的 div，因为它们更容易控制:

.image-item-2-03{
  display: inline-block;	
	height: 390px;
	object-fit: cover;
	width: 60%;
  margin: none;
}

.background-black{
	background-color: #222222;
	display: inline-block;
	width: 20%;
  height: 390px;
  margin: none;
}

.background-grey{
	background-color:grey;
	display: inline-block;
	width: 20%;
  height: 390px;
  margin: none;
}

<div class="background-black"></div><img class="image-item-2-03" src="https://zupimages.net/up/19/13/alfk.jpg" alt=""><div class="background-grey"></div>