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



我正在构建一个小型响应页面。在一个页面上有一个背景图像,上面有很多按钮

我添加了以下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

调整窗口大小,你会看到按钮垂直堆叠,然后向下滚动,你会发现网页的一大部分是白色的。这是我不想要的。

如下更新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;
}

不能100%确定,但如果图像是固定的,并设置为页面的宽度和高度,背景大小设置为覆盖,当用户滚动时,背景将保持静止,您不必担心底部的空白。

移除宽度: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>

最新更新