logo标签列表

如何在浏览器窗口调整大小时设置背景图片以适应窗口大小？

htmlcssangularresponsive
3

我正在构建一个小的响应式页面。 页面上有一个带有许多按钮的背景图片。

我添加了以下CSS来设置背景图片

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
}

我的问题是，当我调整浏览器窗口大小时，按钮会垂直堆叠，然后用户可以导航到背景图像结束的底部，然后用户会看到一个大的白色空间。
我希望在调整浏览器窗口大小时，背景图像能够自适应大小。
有任何想法吗？
编辑： 我尝试了你的建议，但没有帮助。我把我的代码放在StackBlitz页面上: https://stackblitz.com/edit/angular-y1avtu?file=src%2Findex.html 调整窗口大小，您会看到按钮垂直堆叠，然后向下滚动，您将看到网页的大部分是白色的。这就是我不想要的。
1
将 width: 100%; 改为 width: 100vw;。 - panda
3个回答
0
不是100%确定，但如果将图像固定并设置为页面的宽度和高度，背景大小设置为覆盖，当用户滚动时，背景将保持静止，您就无需担心底部的白色空间。
0

从样式中删除 width: 100%; 单击展开片段链接以查看实际结果

.background{
     
    height: 100vh;
    
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
    
background-size: cover;
}
<div class='background'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

0

请按照以下方式更新您的CSS :)

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接