gpt4 book ai didi

html - 背景图像过渡不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 13:01:35 25 4
gpt4 key购买 nike

我只需要对背景 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 不是很好!

最佳答案

因为背景转换在 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>

关于html - 背景图像过渡不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25418286/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com