屏幕上的CSS背景图片调整大小

Question

当我调整屏幕大小时（或者即使我运行我的网站），我也会使用css这个奇怪的问题。我会在解释问题之前发布屏幕截图，这样你就可以正确理解。

我的问题主要在于CSS的奇怪行为，当屏幕分辨率变高时，我的背景图像会“向下”。我已经尝试过 top：0; ，但它似乎不是解决方案。我认为问题可能在于我的background-image属性，但由于我是一个CSS新手，我不知道如何解决它。我想要的是，在每个屏幕上，“内部”图像必须保持在“外部”图像的正下方，就像在第一张照片中一样。我发布我的代码，希望有人可以帮助我！

    .container-titolo-index-big-background {
    background: url("../img/home/1.jpg") no-repeat center center;
    height: 400px;
    max-width: 100% !important;
    width: 100% !important;
}

.container-titolo-index { 
    max-width: 100% !important;
    width: 100% !important;
    background: url("../img/home/2.jpg") no-repeat center center fixed;
    background-size: cover;
    animation: slideshowHome 16s infinite;
    height: 430px;
}

我认为它不会有所帮助，但我也会发布动画代码

@keyframes slideshowHome {
0% {background: url("../img/home/2.jpg") no-repeat center center fixed;}
16% {background: url("../img/home/3.jpg") no-repeat center center fixed;}
32% {background: url("../img/home/4.jpg") no-repeat center center fixed;}
48% {background: url("../img/home/5.jpg") no-repeat center center fixed;}
64% {background: url("../img/home/6.jpg") no-repeat center center fixed;}
80% {background: url("../img/home/1.jpg") no-repeat center center fixed;}
100% {background: url("../img/home/2.jpg") no-repeat center center fixed;}

}

以及我的索引代码

<div class="container-titolo-index-big-background">
    <div class="container-titolo-index"></div>
</div>

Answer 1

我终于解决了问题所在。自从我写了

background: url("../img/home/2.jpg") no-repeat center center fixed;

 图像始终位于屏幕中央。为避免调整大小时的奇怪行为并将图像粘贴到顶部，您必须使用

background: url("../img/home/2.jpg") no-repeat center top fixed;