【发布时间】:2014-04-03 00:37:33
【问题描述】:
我有一个带有 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 中我看不到图像,我只通过悬停显示图像。
有人知道为什么吗?
【问题讨论】:
-
确保css文件和图片的路径正确;对图像路径使用单引号可能有效
-
等等...这是 FF 问题(第一行)...还是 Safari 问题(倒数第二行)。
-
你的
-webkit-gradient被破解成-webkit- gradient有什么原因 -
FF!对不起。我有最新版本的FF
-
-webkit-梯度我已经纠正了这个但不是问题
标签: html css firefox background-image