【问题标题】:Background: url does not work in Firefox [closed]背景:url在Firefox中不起作用[关闭]
【发布时间】: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


【解决方案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 */
  /* ... */
}

【讨论】:

  • 是的,FF 不满意的是 -webkit-gradient。
  • mh 不,位置正确并在 Crhome 中运行...如果我写: background:url(img/icon/moda.png) 20px -webkit-gradient(linear, left top, left底部,从(#fff),到(#EBF0EF));背景:url(img/icon/arrow.png)280px; ...我只看到箭头...
  • 如您所知,webkit-gradient 适用于 Chrome 和 Safary,但如果您想将其用于 FF,则需要将其更改为 linear-gradient
  • 使用您的代码,我看到了 crhome 和 FF 中的渐变,但我没有看到图像...:(
  • 哪个浏览器显示图片和渐变背景?可能图片位置不正确或者图片路径不正确
猜你喜欢
  • 2016-09-22
  • 1970-01-01
  • 2011-04-26
  • 2014-04-14
  • 1970-01-01
  • 2017-07-17
  • 2012-11-05
  • 2023-03-23
  • 1970-01-01
相关资源
最近更新 更多