使用背景时对齐图像顶部：url(myImage) center center no-repeat 和 background-size: cover答案

【问题标题】：Align top of image when using background: url(myImage) center center no-repeat and background-size: cover使用背景时对齐图像顶部：url(myImage) center center no-repeat 和 background-size: cover
【发布时间】：2016-08-22 21:28:28
【问题描述】：

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

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

【问题讨论】：

标签： css image center

【解决方案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>

【讨论】：