Html 如何只显示css背景的一部分？

作为一个HTML和CSS的新用户，我试图让一个图像显示为一个横幅，上面有文本，但我所做的一切和测试都表明，这在图像上是不可能的，所以我使用CSS的背景工具。但当我试图把它做成一个横幅时，它只显示了图片的上半部分

这就是我目前拥有的：

包括图像的纵横比，一切都很好，但我想集中在中半部分，大致如下：

我需要更少的云和更多的山，我如何裁剪背景图像，使其居中

正文{
背景尺寸：封面；
背景位置：中心；
}
身体，
html{
宽度：100%；
身高：100%；
字体系列：“Lato”；
颜色：白色；
保证金：0；
填充：0；
}
h1{
字号：700；
字号：5em；
}
.内容{
垫面：10%；
文本对齐：居中；
文本阴影：0px 4px 3px rgba（0,0,0,0.4），0px 8px 13px rgba（0,0,0,0.1），0px 18px 23px rgba（0,0,0,0.1）；
}
.标题文字{
垫面：10%；
}
人力资源{
宽度：400px；
边框顶部：0.5px实心#F8；
边框底部：1px实心rgba（0,0,0,0.2）；
}
p{
颜色：蓝色；
}
#横幅{
宽度：100%；
背景：url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=2550&q=80）无重复中心顶部；
背景尺寸：封面；
}
#横幅h4{
填充底部：100px；
}

网站样本项目




示例文本

示例文本

替换为：

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center center;

更新：

在行尾更改垂直对齐的百分比：

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;

举个例子

no-repeat center 35%;

---

然后根据您的需要更改35。

首先，我会将您的图像裁剪到您希望的高度。所以在3000px的时候，你应该有一个有一定高度的尺寸。然后，您应该使用CSS媒体查询来更改背景图像，一旦它到达桌面，比如2500px。然后，再次在像平板电脑一样的900像素左右

在上述答案中，他们对该职位的看法是正确的：

background:url（“yourpathtoimage.jpg”）中心不重复

它的作用是垂直居中，水平居中。然后，告诉图像不要重复

你问过如何让它更接近前1/3。这将改变一切：

background:url（“yourimagepath”）0 15%不重复

“0”和“15%”分别是x和y。请查看以下内容以进一步了解情况：


注意：如果你像我上面建议的那样裁剪出3种尺寸，你甚至不必玩位置设置

额外注意：这里是指向CSS媒体查询的链接：
您可以通过给横幅赋予高度来获得完整的背景图像

#banner {
    width: 100%;
    background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
    background-size: cover;
    height: 100%;
}


正文{
背景尺寸：封面；
背景位置：中心；
}
身体，
html{
宽度：100%；
身高：100%；
字体系列：“Lato”；
颜色：白色；
保证金：0；
填充：0；
}
h1{
字号：700；
字号：5em；
}
.内容{
垫面：10%；
文本对齐：居中；
文本阴影：0px 4px 3px rgba（0,0,0,0.4），0px 8px 13px rgba（0,0,0,0.1），0px 18px 23px rgba（0,0,0,0.1）；
}
.标题文字{
垫面：10%；
}
人力资源{
宽度：400px；
边框顶部：0.5px实心#F8；
边框底部：1px实心rgba（0,0,0,0.2）；
}
p{
颜色：蓝色；
}
#横幅{
宽度：100%；
背景：url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=2550&q=80）无重复中心顶部；
背景尺寸：封面；
身高：100%；
}
#横幅h4{
填充底部：100px；
}

网站样本项目




示例文本

示例文本
如果你能简单地解释一下你改变了什么，那就太好了。好吧，如果我想让它介于中间和顶部之间呢？关于这里：在这一行的末尾，播放百分比，然后回答编辑，选中UpdateRated，以获得有关背景位置的所有信息：
#banner {
    width: 100%;
    background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
    background-size: cover;
    height: 100%;
}