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张图片。这将使页面变得沉重，因为这些是非常大的图像。因此，请查看是否可以滚动图像而不将其重复添加到页面中。

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

1 个答案: