Html 背景图像未在div中正常显示或悬停显示

好了，伙计们，我的网站的style.css中有这个

 .asia{
margin-left:40px;
background-image:url('../resources/img/asia.jpg');
width:100px;
height:75px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
 }
.asia:hover{
background-image:url('../resources/img/asia2.png');
width:100px;
height:75px;

 } 

这是两张图片，我将在我的主页上通过

<div class="asia"></div> 

一切都设置好了，让它们在悬停时像动画一样显示

唯一的问题是，在笔记本电脑上一切正常，index.html向我显示所有图像，hover efect工作正常，但在服务器上上载和测试时，图像不会显示

---

有什么问题？我做错了什么？

我可以提出一个建议，不要有两个文件，也许可以将它们合并成一个图像。 然后，在悬停时，您可以更新

背景位置

。这样，您的文档就不需要从服务器请求另一个文件（这对移动用户来说很好，并且可以保存下载），同时还可以防止页面在没有文件的情况下挂起并加载时出现“闪烁”。下面是一个实现示例

.imageContainer {
   background: url('../resources/img/asiacombined.jpg') no-repeat 0 0;
}

让我们假设图像是100像素高

.imageContainer:hover { 
   background-position: 50px /*x axis, shifting to the top of the next image in the file*/ 0 /* Y axis */;
}

希望这能有所帮助

附言

---

您还可以使用

顶部

，

左侧

，

右侧

，

中心

，

底部

来对齐内容。

确实也上载了图像吗？我可以看看“现场”网站吗？你的代码是正确的，因为我刚刚试过。我会确保您已将图像上载到服务器，并且文件的路径正确。仍然无法工作，我不明白问题是什么，因为图像路径正确。是否上载了css文件？网站的url是什么？你试过绝对路径吗？仍然不工作，我不明白问题是什么，因为图像路径是正确的。好的。这可能很烦人，但让我们试试这个。例如，首先将css img url更改为托管在Google上的两个新文件。然后将页面上载到服务器，然后重试。如果出现这些图像，毫无问题，我相信这将表明您的文件路径有问题。这应该有助于我们缩小答案。我尝试了你的解决方案，但仍然不起作用，这不是路径问题，肯定是其他问题。你有没有可能将URL发布到你的网站？我被难住了。同时，如果你停止转换会发生什么？结果会改变吗？