僅填充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

如果你想

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

Answer 2

如果單獨通話背景屬性，您可以使用後設置背景顏色，你會概括你的命令。相反，要更具體一些，並使用背景圖像。這將告訴瀏覽器您將要爲您的背景使用各種屬性。您可能希望刪除僞元素「：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; 

     } 

請讓我知道這是否有幫助。乾杯。