使用背景时对齐图像顶部：url（myImage）center center no-repeat和background-size：cover

Question

我使用下面常用的代码使我的图像覆盖屏幕并保持响应。但我想确保我的图像顶部显示在顶部，而不是图像位于中心。因此它将位于图片的顶部而不是中心。当它是中心时，我无法看到我的图像的顶部，因为在调整大小时它被切断了。我需要看到我的图像的顶部。有人可以帮忙吗？感谢。

#cover { background: url('images/boat.jpg') center center no-repeat; background-size: cover; height: 100%; }

Answer 1

这应该这样做：

#cover {
  height: 100%;
  background-image: url('http://p1.pichost.me/i/63/1872562.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

#main{
  height: 150px;
}

<div id="main">
  <div id="cover">
  </div>
</div>