屏幕调整大小的 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顶部固定；