代码之家 › 专栏 › 技术社区 › Rasul Ebrahimzadeh

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

photoshop asp.net css c#

Rasul Ebrahimzadeh · 技术社区 · 9 年前

我将两个名为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>

1 回复 | 直到 9 年前

Icepickle 9 年前

因此,由于您希望在整个菜单中使用一个图像,因此您必须尽最大努力“调整”每个小图像块的大小。

您可以定义一个共享的sprite css类,以及每个单独的css项,然后在对应项上定义鼠标,尽最大努力使您的sprite大小大致相同,因为目前它们似乎不是:)

一种更简单的方法是将菜单保持为文本,并只需交换背景,如示例片段中的下部菜单所示

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