Html 如何正确使用cover background.image属性

我有一些

div

s（部分），我希望它们有一个

background

分布在整个部分。 我有这个图像

1920x1080 px

，我正在使用这些属性来显示它：

#first{
    background-image: url(images/officialWallpaper.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center;
}

我想知道是否有一种方法可以使图像像封面一样显示，但是从图像的顶部开始，这样就不会被裁剪

---

把我的照片留给你，这样你就可以理解我说的图像顶部被裁剪是什么意思了！（第一部分有

封面

，第二部分包含，因此您可以看到差异）

使用

背景位置：上止点

将背景与视口顶部对齐

#first{
    background-image: url(images/officialWallpaper.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: top center;
}

---

将

背景位置

设置为

左上

即

背景位置：居中
这是您要更改的位置

#first {
  background: url("images/officialWallpaper.jpg") top left no-repeat;
  background-size: cover;
}

是的，在第一张图像中有一些裁剪，因此要解决这个问题，请使用背景位置作为顶部或顶部中心和背景大小覆盖。它覆盖了整个视口的高度和宽度

#first{
background-image: url(images/officialWallpaper.jpg);
background-size:     cover;                      
background-repeat:   no-repeat;
background-position: top;
}

选项1:如果您只想显示图像的顶部，而不关心底部，只需删除
背景位置：居中即可


#首先{
背景图片：url(http://clashnow.maxfet.net:9010/images/officialWallpaper.jpg);
背景尺寸：封面；
背景重复：无重复；
/*背景位置：中心*/
}

这是第一张有问题的图像吗？哇，谢谢你的详细回答，但是，是的，删除该位置属性解决了mt问题，谢谢！