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属性，则会概括您的命令。相反，更具体，并使用背景图像。这将告诉浏览器您将要为您的背景使用各种属性。你可能想删除伪元素＆＃34;：＆＃34;因为我认为这种方法不需要。请尝试以下风格：

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

        }

如果有帮助，请告诉我。欢呼声。

背景图片只填充div的一半

2 个答案: