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

如果这有帮助，请告诉我。干杯。