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

Question

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

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

.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

所以，既然你想为你的完整菜单使用一张图片，你就必须尽最大努力"size"每个小图片块一点。

你可以定义一个共享精灵css class，每个单独的css项目，然后定义那里的鼠标在对应物上，尽量让你的精灵有点相同尺寸，因为目前它们似乎不是 :)

一种更简单的方法是将菜单保留为文本，并仅交换背景，如示例代码段中下方的菜单

.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%);
}

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

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

how to use menu from a png file in asp.net

c#

css

asp.net

photoshop