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>