如何在不裁剪图像的情况下使背景图像成为一整页

Question

我正在尝试制作网页，但无法设置网页的背景图像。 我希望我的背景图像是一整页，而不需要裁剪或缩放图像或需要滚动。 我的背景图片大小为 1920x1080。 我认为这个大小应该使网页成为一个完整的页面，但事实并非如此。 我应该怎么做才能使图像适合一页？

   background-image: url('image/background1-1.png');
   width: 100%;
   height: 100vh;

这段代码是我为背景图像所做的，但它裁剪了图像。

此外，我遵循我在 XD 中所做的设计中图像的大小或位置。 但是，如果我将其作为代码应用，则不匹配。 比如按照XD，文字的位置是top:328px； 左：786px，但如果我将此信息应用于我的代码，文本不会出现在文本应该出现的地方。

我正在努力解决这些问题。 感谢您的帮助，因为我对这个主题了解不多。

Answer 1

您正在寻找background-size属性。 如果您真的根本不想裁剪图像，请使用contain ，但这可能不像真正的背景图像。 cover会将图像放大到刚好适合浏览器窗口尺寸的范围，并在浏览器的 w/h 比率与您的图像 w/h 比率不同时稍微裁剪它。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

background-image: url('image/background1-1.png');
background-color: #000;
background-position:center center;
background-repeat; no-repeat;
background-size: cover; /* contain */
width: 100%;
height: 100vh;

Answer 2

你可以添加这个

    background-image: "url(/meals/3.jpg)",
    background-position: "center",
    background-repeat: "no-repeat",
    background-size: "cover",