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>