Question

我知道如何在页面顶部放置横幅图片，但我如何在底部放置横幅图片。我在横幅上的代码是：

<img src="Pics/images4.jpg" alt="wave lines" id="image">

#image {
  width: 100%;
  height: 225px;
}

我不希望图像固定或居中，而是从左到右延伸。这样当有人到达页面底部时，他们会看到与屏幕顶部相同的图像。

Answer 1

我建议使用背景图片。

<强> codepen

＆＃13;

html {
  background: url("//dummyimage.com/4000x200") center top / auto 100px no-repeat, url("//dummyimage.com/4000x200") center bottom / auto 100px no-repeat;
  min-height: 100%;
  padding: 100px 0;
  box-sizing: border-box;
}

＆＃13;

Answer 2

您可以使用flexbox。在这种情况下，margin-top: auto会将弹性项目推送到容器的底部。

＆＃13;

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: auto;
}

＆＃13;

<img src="https://via.placeholder.com/1350x150">

＆＃13;

Answer 3

您还可以使用background-attachment:fixed，并在页面的顶部和底部添加透明部分。

<div class="padded">
    <h2>This is a Title</h2>
</div>

#image { 
    background-attachment:fixed;
    height: 100vh;
    width: auto;
}

.padded {
    padding:100px 0;
    text-align:center;
}

这将创建窗口效果，因此图像不会在页面滚动时滚动，但会允许在页面的顶部和底部看到相同的图像。

在页面的顶部和底部添加横幅图像

3 个答案: