我已经设法用 CSS 中的网页背景做到这一点
只有 webkit 浏览器支持背景渐变过渡。所以如果你想使用它继续使用背景。假设要交换的徽标是 2 并且它们的大小相等.. 例如 100 像素：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>talk</title>
<style>
#logo{
width:100px;
height:100px;
-webkit-transition: background-image 1s ease-in-out;
background-image:url("logo1.png");
}
#logo.anotherLogo {
background-image:url("logo2.png");
}
</style>
<script>
var swap=function(){
document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo"></div>
<button>swap logo</button>
</body>
</html>
解决方案 2，这个支持更多（适用于大多数现代浏览器，而不仅仅是 webkit 浏览器）
这需要一个 div 内的 2 个图像，并在 css 中使用绝对值，你可以看到更多 css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
<style>
#logo{
width:128px;
height:128px;
}
#logo>img{
position:absolute;
width:128px;
height:128px;
-webkit-transition:opacity 1s ease-in-out;
}
#logo>img:nth-child(2){
opacity:0;
}
#logo.anotherLogo>img:nth-child(2){
opacity:1;
}
#logo.anotherLogo>img:nth-child(1){
opacity:0;
}
</style>
<script>
var swap=function(){
document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo">
<img src="logo1.png"/>
<img src="logo2.png"/>
</div>
<button>swap logo</button>
</body>
</html>
解决方案 3
在这种情况下，div 容器具有其中一个徽标的背景和内部图像。它也具有与您相同的结构，<center><img/></center>并且可以通过较少的修改来替换您现有的代码。但是标签“中心”是一个旧标签，不应该在现代网站中使用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
<style>
#logo{
width:128px;
height:128px;
background-image:url(logo2.png);
}
#logo>img{
width:128px;
height:128px;
-webkit-transition:opacity 1s ease-in-out;
}
#logo.anotherLogo>img{
opacity:0;
}
</style>
<script>
var swap=function(){
document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo">
<img src="logo1.png"/>
</div>
<button>swap logo</button>
</body>
</html>
*ifu 想要一个特定大小的背景图像，您可以使用背景大小 css
background-size:contain;
包含调整图像大小，以便完整图像在您的 div 内
盖子装满你的容器
或者你也可以使用宽度和高度
background-size:100px 100px;
如果您想为您的多重交换功能提供更多帮助……请问。