C# 如何在asp.net中使用png文件中的菜单

我有两个菜单名为menu1和menu2，它们被放入一个png文件中，看起来很相似，但背景颜色不同。 我想当鼠标停留在menu1的item1上时，menu2的item1将其替换，依此类推，直到结束

我使用下面的方法，但我没有得到正确的答案

.img{
宽度：500px；
高度：50px；
背景图像：url（'Images/example.PNG'）；
背景位置：-20px-30px；
背景重复：无重复；}
.img:悬停{
宽度：500px；
高度：50px；
背景图像：url（'Images/example.PNG'）；
背景位置：-20px-50px；
背景重复：无重复；}

因此，由于您希望使用一个图像作为完整菜单，因此您必须尽最大努力对每个小图像块“调整大小”

您可以定义一个共享的精灵css类和每个css项，然后在其中定义鼠标悬停对应项，尽最大努力使您的精灵大小相同，因为目前它们似乎不是：）

一种更简单的方法是将菜单保持为文本，只需交换背景，就像示例代码段中较低的菜单一样

。菜单精灵{
背景图像：url（'http://i.imgur.com/PeXVdXx.png');
背景重复：无重复；
背景位置：左上角；
}
.菜单块{
显示：块；
宽度：70px；
高度：30px；
}
menu1先生{
背景位置：-84px-91px；
}
.menu1:悬停{
背景位置：-84px-164px；
}
梅努2先生{
背景位置：-154px-91px；
}
.menu2:悬停{
背景位置：-154px-164px；
}
menu3先生{
背景位置：-224px-91px；
}
.menu3:悬停{
背景位置：-224px-164px；
}
menu4先生{
背景位置：-294px-91px；
}
.menu4:悬停{
背景位置：-294px-164px；
}
menu5先生{
背景位置：-364px-91px；
}
.menu5:悬停{
背景位置：-364px-164px；
}
menu6先生{
背景位置：-434px-91px；
}
.menu6:悬停{
背景位置：-434px-164px；
}
menu7先生{
背景位置：-504px-91px；
}
.menu7：悬停{
背景位置：-504px-164px；
}
.menu8{
背景位置：-574px-91px；
}
.menu8：悬停{
背景位置：-574px-164px；
}
menu9先生{
背景位置：-644px-91px；
}
.menu9：悬停{
背景位置：-644px-164px；
}
.菜单{
列表样式类型：无；
显示：内联块；
}
李先生{
浮动：左；
}
.菜单李a{
显示：块；
位置：绝对位置；
宽度：70px；
高度：30px；
文本对齐：居中；
垂直对齐：中间对齐；
文字装饰：无；
垫面：5px；
}
.菜单项{
背景图像：线性梯度（至底部，#EFEF 0%，#EFEF 75%，#DFDF 100%）；
}
.菜单项：悬停{
背景图像：线性梯度（至底部，#ddefef 0%，#ccefef 75%，#CCDFF 100%）；
}

那么您当前的问题是更改了整个菜单？如果要实现这种行为，则需要分别为所有菜单项设置相同的背景菜单，并手动计算每个菜单项的距离

.img{
width: 500px;
height: 50px;
background-image:url('Images/example.PNG');
background-position:-20px -30px;
background-repeat:no-repeat;}

.img:hover{
width: 500px;
height: 50px;
background-image:url('Images/example.PNG');
background-position:-20px -50px;
background-repeat:no-repeat;}

        <div class="img">

        </div>