Question

我正在尝试仅使用图像的底部作为布局的背景。这是用于显示图像的CSS。

CSS：

    .image{
        position: absolute;
        background-image: url("hero.jpg");
        width: 1440px;
        height: 1315px;
        top:-760px;
    }

所以现在当我把它放在我的html文档中时，我添加的任何内容都不在视图中，因为我将-760px放在图像的顶部。

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Apple</title>
</head>
<body>

    <div class="container">
        <div class="image">


        </div>
    </div>

</div>

</body>
</html>

我的问题是如何在不在页面上方和页面外显示任何添加内容的情况下使用此图像。

其他CSS：

body{
    margin:0;
    padding:0;
}

.container{
    min-height:100%;
    position:relative;
}

.image{
    position: absolute;
    background-image: url("hero.jpg");
    width: 1440px;
    height: 1315px;
    top:-760px;
}

Answer 1

而不是使用全尺寸容器并使用负值顶部向上移动它，如下所示：

body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100%;
  position: relative;
}

.image {
  position: absolute;
  background-image: url("http://via.placeholder.com/1280x315");
  width: 1280px;
  height: 315px;
  top: -160px;
}

<div class="container">
  <div class="image">


  </div>
</div>

尝试使用background-position：将图像容器的高度设置为需要显示的高度。在下面的代码段中，我们使用了background-position: center bottom;（它将图像集作为容器中的背景与底部中心对齐）

body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100%;
  position: relative;
}

.image {
  position: absolute;
  background-image: url("http://via.placeholder.com/1280x315");
  width: 1280px;
  height: 155px;  /* 315 - 160 */
  background-position: center bottom;
}

<div class="container">
  <div class="image">


  </div>
</div>

有关后台CSS属性的更多信息，请参阅：

https://www.w3schools.com/cssref/pr_background-position.asp

CSS背景图片，内容已脱离页面

1 个答案: