背景图片仅填充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;
}

Answer 2

如果仅调用background属性，则将对命令进行一般化。 相反，请更加具体，并使用背景图片。 这将告诉浏览器您要使用各种属性作为背景。 您可能想要删除伪元素“：after”，因为我认为此方法不需要此元素。 尝试以下样式：

.bg-img-3 {
            content: '';
            position: absolute;
            width: 9.4cm;
            height: 3cm;
            background-image: url("./img/video.png");
            background-repeat: no-repeat;
            background-size: 9.4cm 1.5cm;
            background-color: #999;

        }

请让我知道这可不可以帮你。 干杯。