Question

好的，我在我的网站的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显示所有图像，悬停效果很好，但在服务器上传和测试时，图像不会显示。

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

Answer 1

我可以提出建议，而不是有两个文件，也许可以将它们合并为一个图像。然后，在悬停时，您可以更新background-position。这样，您的文档将不需要从服务器请求另一个文件（适用于移动设备上的人，并保存下载），以及在页面挂起而没有文件并将其加载时防止“闪烁”。这是一个示例实施。

.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 */;
}

希望这有帮助。

的PS。

您还可以使用top，left，right，center，bottom来对齐内容。

背景图像不正常显示在div中或悬停时

1 个答案: