小编Gab*_*bri的帖子

CSS 背景尺寸：封面；效果不好

我有一个#div具有以下 CSS 样式的元素：

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

Run Code Online (Sandbox Code Playgroud)

结果如下：

正如您在元素的左侧和底部看到的那样，有两条蓝线（颜色对应于代码#53A7E7）。

如果我删除样式，background-size: cover;两条线都会消失，图像会覆盖元素的整个表面。

知道如何解决这个问题吗？

原始图像的尺寸为 1779x683 像素，但我希望它可以针对任何图像尺寸进行修复。

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

Run Code Online (Sandbox Code Playgroud)

#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;
}

Run Code Online (Sandbox Code Playgroud)

html css cover background-size

Gab*_*bri

2018 11-27

4
推荐指数

1
解决办法

687
查看次数