Question

我有一个带有2个悬停背景图像的菜单问题是我没有在Firefox中看到图像背景。

这是HTML代码：

<div class="markermenu">
 <ul>
  <li><a  href="#" id="one">Moda e Accessori</a></li>
  <li><a  href="#" id="two">Hotel e Viaggi</a></li>
  <li><a  href="#" id="three">Cosmesi</a></li>
  <li><a  href="#" id="four">Giochi e Scommesse</a></li>
  <li><a  href="#" id="five">Elettronica</a></li>
 </ul>
</div>

这就是CSS，例如第一个声音：

.markermenu{
 width: 311px; /*width of menu*/
}

.markermenu ul{
 list-style-type: none;
 margin: 1px 0;
 padding: 0;
 border: 0px solid #9A9A9A;
}

.markermenu ul li a#one{    
 background: url(/img/icon/moda.png) 20px, url(/img/icon/arrow.png) 280px, -webkit-  gradient(linear, left top, left bottom, from(#fff), to(#EBF0EF)) ;
 background-repeat:no-repeat;
 background-color:#fff;
 height:79px;
 color: #17548e;
 display: block;
 width: auto;
 padding: 30px 0;
 padding-left: 90px;
 text-decoration: none;
 border-bottom: 1px solid #D4DBD9;
 border-left: 1px solid #D4DBD9;
}

.markermenu ul li a#one:hover{
 color: #fff;
 background:url(img/icon/giac.png) 20px, url(img/icon/arrow_white.png) 280px;
 background-repeat:no-repeat;
 background-color: #17548e;
 /*onMouseover image change. Remove if none*/
}

Chrome中的所有功能都很好但在Firefox中我看不到图像，只显示悬停时的图像。

有人知道为什么吗？

Answer 1

尝试

.markermenu ul li #one {
  background: url(/img/icon/moda.png), url(/img/icon/arrow.png), linear-gradient(to bottom, #fff, #EBF0EF);
  background-repeat:no-repeat, no-repeat;
  background-position: 20px 0, 280px 0; /* if these positions are incorrect plz correct them */
  /* ... */
}

背景：url在Firefox中不起作用

1 个答案: