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

我正在制作一个具有旋转背景图像的网页。在本地主机上开发，我安排了一些东西，让图像中的人物定位在我想要的位置。但是，当我推送到服务器并在不同浏览器中打开网页时，有些人不在屏幕上，并且结果因浏览器而异。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; 

}

来源

2012-08-27 Leahcim

请附上您的html。 – Narendra

在您的服务器CSS和您的本地CSS上运行差异。另请检查您部署的背景图像是否与本地版本相同。这很可能是您的部署方法中的一些错误。 – Duopixel

@Rain你知道Ruby on Rails吗？很难显示HTML而没有发布来自不同文件，并且问题在于背景图像正在随着javascript而改变。但是，你可以看看服务器上的应用程序在sugarpova.herokuapp.com – Leahcim

我检查你所提供的链接的CSS。我认为下面的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页图像，这些图像已经存在于您的页面中。这将使页面变得沉重，因为这些图像非常大。所以请看看你是否可以滚动图像而不必重复添加到页面。

来源

2012-08-27 07:01:09 Narendra

谢谢，但如果我使页面滚动图像将不会自动切换，并且由于页面添加相同的图像，它不会使它更重，因为图像应该被缓存，不是吗？ – Leahcim

我不确定缓存如何在Ruby on Rails中工作。我知道这是如何在.NET中工作的。通常，对于每个图像浏览器分别向服务器发送请求。 – Narendra

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

回答

相关问题