为什么使用CSS无法正确显示图片？

Question

我是学习Web开发的新手，尤其是PHP和CSS。我的图像大小为2560×1600。该大小是否足以覆盖您的整个背景？我只打算放置1张背景图片，但是当我运行代码时，它将显示好像有2张图片。

下面是我的输出的摘要。

这是我的CSS代码：

body{
    margin: 0;
    padding: 0;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 50, 0.5),rgba(0, 0, 50, 0.5)), url(images/wp2330460.jpg);
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}

Answer 1

如果您的背景尺寸设置为覆盖，则不应重复。但是，如果容器大于图像且背景大小设置为 fit ，除非背景重复设置为 no-repeat ，否则它将重复。

无论如何，下面的代码显示了如何首先有目的地重复图像。然后，不要再重复。

body {
  font-size: 18px;
}
h1 {
  font-family: 'Helvetica Neue', Arial;
  color: #ffffff;
  font-size: 2.5rem;
  line-height: 4.5rem;
}
.background-repeat {
    margin: 0;
    padding: 0;
    height: 2000px;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 50, 0.5),rgba(0, 0, 50, 0.5)), url(https://i.stack.imgur.com/kuEMz.jpg);
    background-size: fit;
    background-position: center;
    font-family: sans-serif;
    background-repeat: repeat;
}

.background-no-repeat {
    margin: 0;
    padding: 0;
    height: 2000px;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 50, 0.5),rgba(0, 0, 50, 0.5)), url(https://i.stack.imgur.com/kuEMz.jpg);
    background-size: fit;
    background-position: center;
    font-family: sans-serif;
    background-repeat: no-repeat;
}

<div class="background-repeat">
  <h1>This Background Image will Repeat</h1>
</div>

<div class="background-no-repeat">
    <h1>This Background Image will NOT Repeat</h1>
</div>