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

这个问题尚不清楚，但是如果您想让图像的左侧为灰色背景，而右侧为黑色，则需要重新排列一下方块。我使用内联块而不是绝对定位的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>

Answer 2

它在那里，但是其height为零。将其设置为某个数字。

.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">
hello!
</div>
</div>

Answer 3

由于我不完全理解您的问题，因此我想从您所说的内容出发，您想将灰色背景放在黑色背景之上。将图像放在堆栈的最顶部。

这是代码：

CSS

.image-item-2-03 {
  display: inline-block;
  height: 390px;
  object-fit: cover;
  width: 40%;
  z-index: 100;
}

.background-black {
   display: inline-block;
   background-color: #222222;
   width: 100%;
   z-index: -200;
}

.background-grey {
   display: inline-block;
   background-color: grey;
   padding: 10% 10% 10% 45%;
   height: 70px;
   z-index: -100;
}

HTML

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

https://jsfiddle.net/1wvk53mc/98/作为输出