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

Question

我将两个名为menu1和menu2的菜单放入一个外观相似但背景颜色不同的png文件中。 我想把当鼠标放在menu1的item1上，menu2的item1替换它，依此类推，直到结束。

我使用以下方法，但我没有收到正确答案....

this is my png file

.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>

Answer 1

所以，既然你想在一个完整的菜单中使用一个图像，你就必须尽力做到＃34;尺寸＆＃34;每个小图像块都有一点。

你可以定义一个共享精灵css类，以及每个单独的css项，然后在那里定义鼠标对应的东西，尽力使你的精灵有点相同的大小，因为目前他们似乎没有是:)）

更简单的方法是将菜单保留为文字，然后只更换背景，如示例代码段中的下方菜单

＆＃13;

＆＃13;

.menu-sprite {
  background-image: url('http://i.imgur.com/PeXVdXx.png');
  background-repeat: no-repeat;
  background-position: top left;
}
.menu-block {
  display: block;
  width: 70px;
  height: 30px;
}
.menu1 {
  background-position: -84px -91px;
}
.menu1:hover {
  background-position: -84px -164px;
}
.menu2 {
  background-position: -154px -91px;
}
.menu2:hover {
  background-position: -154px -164px;
}
.menu3 {
  background-position: -224px -91px;
}
.menu3:hover {
  background-position: -224px -164px;
}
.menu4 {
  background-position: -294px -91px;
}
.menu4:hover {
  background-position: -294px -164px;
}
.menu5 {
  background-position: -364px -91px;
}
.menu5:hover {
  background-position: -364px -164px;
}
.menu6 {
  background-position: -434px -91px;
}
.menu6:hover {
  background-position: -434px -164px;
}
.menu7 {
  background-position: -504px -91px;
}
.menu7:hover {
  background-position: -504px -164px;
}
.menu8 {
  background-position: -574px -91px;
}
.menu8:hover {
  background-position: -574px -164px;
}
.menu9 {
  background-position: -644px -91px;
}
.menu9:hover {
  background-position: -644px -164px;
}
.menu {
  list-style-type: none;
  display: inline-block;
}
.menu li {
  float: left;
}
.menu li a {
  display: block;
  position: absolute;
  width: 70px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  padding-top: 5px;
}
.menu-item {
  background-image: linear-gradient(to bottom, #efefef 0%, #efefef 75%, #dfdfdf 100%);
}
.menu-item:hover {
  background-image: linear-gradient(to bottom, #ddefef 0%, #ccefef 75%, #ccdfdf 100%);
}

＆＃13;

<ul class="menu">
  <li class="menu-sprite menu-block menu1"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu2"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu3"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu4"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu5"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu6"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu7"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu8"><a href="#" />
  </li>
  <li class="menu-sprite menu-block menu9"><a href="#" />
  </li>
</ul>

<ul class="menu">
  <li class="menu-item menu-block"><a href="#">Item 1</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 2</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 3</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 4</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 5</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 6</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 7</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 8</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 9</a>
  </li>
  <li class="menu-item menu-block"><a href="#">Item 10</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;