Question

我只需要进行背景img的简单转换，但是在搜索教程时我发现了一种方法。但它不起作用？不知道为什么？

#chat
{
    background-image:url(chat.png);
    width:91px;
    height:40px;
    float:right;
    transition: background-image 1s ease-in-out;
}
#chat:hover
{
    background-image:url(hchat.png);
    width:91px;
    height:40px;

}

代码链接： http://jsfiddle.net/xscsz5c0/2/

有什么东西，我想念？因为我在CSS方面不是那么好！

Answer 1

由于后台转换在Firefox中不起作用，因此这是一种解决方法（也解决了悬停图像未加载页面的问题）：http://codepen.io/pageaffairs/pen/azHli

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#chat
{
    background:url(http://i62.tinypic.com/29or6z6.png);
    width:91px;
    height:40px;
    position: relative;
    display: inline-block;  
}

#chat::after
{
    content: "";
    display: inline-block;
    background: url(http://i57.tinypic.com/i26j3b.png);
    width:91px;
    height:40px;
    opacity: 0;
    -moz-transition: opacity 5s ease-in-out;
    -webkit-transition: opacity 5s ease-in-out;
    -o-transition: opacity 5s ease-in-out;
    transition: opacity 5s ease-in-out;
}

#chat:hover::after
{
    opacity: 1;
}

</style>
</head>
<body>

<a id="chat" href="chat.php"></a>

</body>
</html>

Answer 2

在代码中添加display：inline-block：

#chat:hover
{
    background-image:url(http://i57.tinypic.com/i26j3b.png);
    width:91px;
    height:40px;
   display:inline-block;

}

Demo

Answer 3

我最喜欢的解决方法是使用名为anystretch的jQuery插件。您需要下载anystretch js文件并将其添加到您的项目中。你还需要有jquery。

我喜欢anystretch因为它用指定的图像替换了目标div，但也让你为它选择了淡入淡出时间。

我在使用css转换时遇到了问题，因为它的跨浏览器功能非常糟糕。

在codepen http://codepen.io/cwilliams23/pen/iIomJ上的示例

 $(document).ready(function() {
    $("#chat").mouseenter(function() {
      $("#chat").anystretch("http://i57.tinypic.com/i26j3b.png", {speed: 200});   
    $("#chat").mouseleave(function() {
      $(this).anystretch("http://i62.tinypic.com/29or6z6.png", {speed: 1000});
    });
    });
 });

您可以使用淡入淡出时间使其淡出您想要的方式。速度设置以ms为单位，因此5s将为5000.

背景图像转换不起作用？

3 个答案: