Question

我正在尝试建立一个网站，并且我希望图像（1920×1080）可以覆盖整个页面。我用过：

background-repeat: no-repeat;
background-size: 100%;

看起来不错。但是，当我调整浏览器的大小并将其垂直拉下时，图像就没有了。我想例如在以下站点上调整图片大小：https://www.okainsbayseafood.co.nz/（当垂直调整浏览器大小时，图像会随之出现）

抱歉我的英语水平，如果我听起来很愚蠢

my webpage

Answer 1

将background-size从100%切换到cover：

background-size: cover;

这告诉浏览器图像应填满可用空间，并会改变图像的尺寸。

注意：如果要将CSS添加到不是body标签的元素中，则可能需要添加其他代码来调整元素的大小您要为其添加此背景。如果直接添加到body元素中，此CSS将产生所需的效果。

Answer 2

实际上，您有很多可能得到这样的结果：

您在上面链接的页面使用了所谓的断点，该断点根据屏幕大小加载调整大小的图像。在那种情况下，这确实是个好主意，因为它们使用的图像非常大，会永久加载在小屏幕和低带宽上。

对于您来说，作为一个初学者，最好首先更深入地了解CSS以及仅使用一张图像即可完成的工作，然后再选择像上面的网站这样的优化方法。因此，对您而言，类似的事情可能会起作用：

background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */

研究该CSS代码，并确保您了解它的功能以及其他选择。您可能会在那里尝试一些值并获得其他结果。

背景不会垂直调整大小

2 个答案: