html - 背景图片只填充一半的div

Question

我有一个设置大小的 div，我需要向其添加背景图像。但是我希望图像填充 div 的宽度但被裁剪以占据 div 高度的三分之一到一半。我已经使用像这样的伪元素来管理它:

<div class="card-wrap bg-img-3"><div class="card">
  <div class="top">
        <h2 class="white">Heading</h2>
   </div>    
</div></div>  



.bg-img-3:before {
            content: '';
            position: absolute;
            width: 9.4cm;
            height: 3cm;
            z-index: -1;
            background: url("./img/video.png");
        }

但是使用这种技术我似乎无法为 div 的下半部分添加背景颜色。

如何在同一个 div 上使用裁剪后的背景图像和背景颜色？

Answer 1

如果你愿意，你可以使用after来设置背景颜色

.bg-img-3:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
    background-color: #f00;
}