css - CSS：本地主机和服务器之间的对齐变化

Question

我正在制作一个具有旋转背景图像的网页。在 localhost 上进行开发，我安排了一些东西，以便图像中的人位于我想要的位置。但是，当我推送到服务器并在不同的浏览器中打开网页时，有些人不在屏幕上，结果因浏览器而异。

这是我正在使用的 CSS

.animate-this .img1,
.animate-this .img3 {
    clear: left;
    display: block;
    width: 100%;
    height: 1210px;
    margin-left: auto;
    margin-right: auto;

}
.animate-this .img2 {
    clear: left;
    display: block;
    width: 1620px;
    height: 1210px;
    margin-left: auto;
    margin-right: auto;
    background-color: #2b292b;
    background-repeat: no-repeat;

}

.animate-this .img4 {
    clear: left;
    display: block;
    width: 1522px;
    height: 1210px;
    background-color: #2b292b;
    background-repeat: no-repeat;

}

Answer 1

我检查了你提供的链接。我认为下面的 CSS 可能会有所帮助。

.animate-this .img1,
.animate-this .img3 {
    clear: left;
    display: block;
    width: 100%;
    height: 1210px;
    margin-left: auto;
    margin-right: auto;

}
.animate-this .img2 {
    clear: left;
    display: block;
    width: 100%;
    height: 1210px;
    margin-left: auto;
    margin-right: auto;
    background-color: #2b292b;
    background-repeat: no-repeat;

}

.animate-this .img4 {
    clear: left;
    display: block;
    width: 100%;
    height: 1210px;
    background-color: #2b292b;
    background-repeat: no-repeat;

}

我还注意到您页面中的一件事。每次滚动它都会在您的页面中添加 3-4 张图像，这些图像已经在您的页面中。这将使页面变得沉重，因为这些是非常大的图像。因此，请查看是否可以滚动图像而不重复将它们添加到页面。