CSS background-size：封面;工作很糟糕

Question

我有一個帶有以下CSS樣式的#div元素：

width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;

結果如下：

正如您在元素的左下角看到的那樣，有兩條藍線（顏色對應於代碼#53A7E7 ）。

如果我刪除樣式background-size: cover; 兩條線消失，圖像覆蓋元素的整個表面。

知道如何解決這個問題嗎？

原始圖像的尺寸為1779x683像素，但我希望它可以固定為任何圖像尺寸。

 #div { width: 413px; height: 140px; background-image: url("https://i.stack.imgur.com/SvWWN.png"); background-color: #53A7E7; background-size: cover; background-position: center; background-repeat: no-repeat; } 

 <div id="div"></div> 

Answer 1

不要同時使用background-color和background-size: cover ，因為圖像將位於顏色的頂部。 如果您需要覆蓋background-size的顏色，只需添加border 。 background-size: cover正在運作。 在您的示例中，我認為您需要display: inline-block 。

 #div { width: 413px; height: 140px; background-image: url("https://i.stack.imgur.com/SvWWN.png"); border: 10px solid #53A7E7; background-size: cover; background-position: center; background-repeat: no-repeat; } 

 <div id="div"></div>