仅显示背景图像的顶部

Question

我正在使用background-image: url()添加图像。它只显示图像的顶部，但不显示整个图像。 我不确定它为什么要这样做。 我正在关注 Udemy 上的在线讲师，我已经与他一起检查了我的代码，一切都完全相同。有什么建议吗????

这是代码笔：https://codepen.io/mverma45/pen/ZEWNQpZ?editors=1100

我认为问题出在哪里但我不确定的代码？ 是我的间距吗？

.HTML

<section class="hero">
<div class="background-image" style="background-image: url(assets/css/img/main.jpg);"></div>
<div class="hero-content-area">
<h1>Mountain Travel</h1>
<h3>Unmissable Adventure Tours Around the World</h3>
<a href="#" class="btn">Contact Us Now</a>
</div>
</section>

.CSS

.hero {
position: relative;
justify-content: center;
text-align: center;
min-height: 100vh;
color: #fff;
}
.hero .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-size: cover;
z-index: -1;
background-color: #80a3db;
}

Answer 1

您的background-imagediv跨越整个宽度，但只有100px高。如果你在像这样的非常"拉伸"的元素上使用background-size: cover，并且不添加任何其他设置，图像将被水平拉伸以适应(完整)宽度，并且其高度将按比例调整，因此它不会被扭曲。对于具有公共宽度/高度比例(如 3：2)的图像，这将导致图像的一小部分仅显示在div 中，如您所描述。

可能的解决方案：

1.)如果它是一个抽象图像，并且您不关心比例失真，请使用background-size: 100% 100%

2.) 或者使用已经具有大约div 高度/宽度比例的图像。

Answer 2

如果将背景图像的高度更改为更大的高度，例如高度：500px，则背景图像会更长。 您可以根据需要试验该值。希望有所帮助