Question

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

这是密码笔：start

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

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-image div跨越整个宽度，但只有100px高。如果在这样的“拉伸”元素上使用background-size: cover，并且不添加任何其他设置，则图像将被水平拉伸以适应（完整）宽度，并且其高度将按比例调整，因此它不会失真。如您所描述的，对于具有相同的宽/高比例（例如3：2）的图像，这将导致图像中只有很小一部分显示在div中。

可能的解决方案：

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

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

Answer 2

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

仅显示背景图片的顶部

2 个答案: