php - 为什么使用 CSS 无法正确显示图像？

Question

我刚开始学习网络开发，尤其是 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

如果您的背景大小设置为覆盖，则不应重复。但是，如果容器大于图像并且 background-size 设置为 fit 它将重复，除非 background-repeat 设置为 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(/image/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(/image/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>