CSS:本地主机和服务器更改之间的对齐方式

Question

我正在制作一个具有旋转背景图像的网页。在本地主机上开发，我安排了一些事情，使图像中的人位于我想要的位置。但是，当我推送到服务器并在不同的浏览器中打开网页时，有些人不在屏幕上，并且结果因浏览器而异。

这是我正在使用的 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 张图像，这些图像已经在您的页面中。这将使页面变重，因为这些是非常大的图像。所以请看看你是否可以滚动图像而不重复将它们添加到页面。