0

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

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

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

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

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

4

2 回答 2

0

你可以添加这个

    background-image: "url(/meals/3.jpg)",
    background-position: "center",
    background-repeat: "no-repeat",
    background-size: "cover",
于 2021-07-12T20:56:41.823 回答
0

您正在寻找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;
于 2021-07-12T20:49:58.127 回答