CSS3背景大小不起作用但在Firebug中可见 - Firefox 3.6

Question

我正在使用新的CSS3规范"background-size"来使背景图像略微溢出页面大小.它在webkit(Chrome和Safari)中运行良好,但"-moz-background-size"属性在Firefox中根本不起作用.不寻常的是,如果您浏览的网站直播,将"-moz-背景大小的"属性IS观看Firebug的网站的时候露出来了!FF文档表示从3.6开始支持它,我运行3.6.

这是我的代码:

@media screen and (max-width: 1150px) { 
/* special sytles for browser windows less than 1150px */
body{
    -o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
    background-size: 130%;
}
#trans_fake{
    -o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;  
    background-size: 130%;
}
}

任何调试建议？

编辑 我现在更困惑了... QuirksMode.org报告了一个"白色"框而不是红色或绿色表示在Firefox 3.6中基于css3背景大小百分比的兼容性:( http://www.quirksmode.org/ CSS/background.html

Answer 1

今天早上我遇到了同样的问题,为我解决的问题是确保图像列在background-size属性之前.它只在一个实例中工作而在另一个实例中没有.为什么？CSS属性的顺序.试试这个.

.front #logo {
  height: 58px;
  width:323px;
  margin-left: 10px;
  background:url(../imgs/logo-x2-retina.png) no-repeat;
  -o-background-size: 100%;
  -moz-background-size: 100% auto;
  -webkit-background-size:100%;
  background-size: 100%;
  margin: 0 auto;



        
      
    

Answer 2

事实证明这是我的 CSS 错误，我有一个

body{
background:url() top center no-repeat;
}

后来在页面下方以某种方式覆盖了 Firefox“-moz-background-size: 130%”。所以，如果你遇到困难，请给

body{
background-size: 130% !important;
}

到 Firefox 中的 CSS，它可能会解决问题。