0

我无法将图像正确放置在标题栏的链接列表后面。我尝试调整左侧位置，但仍然失败。我想找到一个供大家使用的解决方案。谢谢！

http://thefishonthedome.com/index.html

这是我所说的一个例子。MBACK 核对

下面的代码：

   <div class="header">
        <div id="menu">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about_us.html">About Us</a></li>
            <li><a href="reviews.html">Reviews</a></li>
            <li><a href="kids_art.html">Kids' Art</a></li>
           (For Example) <li><img alt="" id="mback"3 src="images/fish.png"><a href="contact_the_fish.html">Contact The Fish</a></li>
          </ul>
        </div>
      </div>

CSS：

/*Menu Style (Same All Through)*/
#menu ul{
  list-style-type:none; 
}
#menu li{
  display:inline;
  font-family: 'Alef', sans-serif;
  font-size: 30px;
  padding-right:22px;
}
#menu{
  text-align:center;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}

/*Fish Position*/
/*Index Page*/
#mback{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*About Us*/
#mback2{
  z-index: -1;
  height:75px;
  width:150px;
  position: absolute;
  top:0;
  left:0;
}
/*Contact The Fish*/
#mback3{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*Reviews*/
#mback4{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*Kids Art*/
#mback5{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
4

2 回答 2

1

使鱼图像成为背景图像并将文本放在它上面

#menu li {
    background: url(images/fish.png) no-repeat;
    font-size: 30px;
    etc...
}

看到这篇文章：使用背景图片为李

于 2013-09-07T02:40:38.087 回答
1

像这样的东西？

jsFiddle 演示在这里

CSS

#menu ul{
   list-style-type:none; 
}
#menu li{
     display:inline;
     font-family: 'Alef', sans-serif;
     font-size: 20px;
     padding:38px;
}
#menu{
     text-align:center;
     position: absolute;
     top:0;
     left:0;
}  
.active {
     background: url('http://thefishonthedome.com/images/fish.png') -6px 20px / 130px 64px no-repeat;
}

注意类的使用.active

  <ul>
    <li class="active"><a href="index.html">Home</a></li>
    <li><a href="about_us.html">About Us</a></li>
    <li><a href="reviews.html">Reviews</a></li>
    <li><a href="kids_art.html">Kids' Art</a></li>
    <li><a href="contact_the_fish.html">Contact</a></li>
  </ul>
于 2013-09-07T02:49:43.177 回答