Question

我的背景图片不希望与页面的其余部分一起缩放。当我完成这项工作时，当我缩小页面时，它会在它下方产生巨大的空白空间。

.vintage {
  width: 100%;
  height: 100vh;
  background-image: url(vintagemcdonalds.jpg);
  background-repeat: no-repeat;
}

Answer 1

使用background-size:cover background-image来覆盖整个div。

在此处详细了解此属性：CSS3 background-size Property

＆＃13;

.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat; 
background-size:cover;
}

＆＃13;

<div class="vintage">

</div>

＆＃13;

Answer 2

尝试将属性值封面添加到您的css文件中。

像这样：

div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}

此可让您将背景图像缩放为尽可能大，以便背景区域完全被背景图像覆盖。

如果背景图像的某些部分在背景定位区域内不可见，请尝试向您的css提供一些额外信息，例如：

width: 100vw;
height: 100vh;

（注意 CSS3为视口相对单位提供 .100vw表示100％的视口宽度.100vh;高度的100％。）

如果您不想重复背景图片，只需添加：

background-repeat:no-repeat;

有关详情，请查看＆＃34; https://css-tricks.com/perfect-full-page-background-image/＆＃34;它会让您对尝试使用全屏幕背景时要考虑的不同方法有所了解。

希望这会有所帮助，祝你好运！的：）

我的背景图像缩放不正确。我把高度改为100％等

2 个答案: