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/用于输出