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

【问题标题】：CSS3 Background-size Not working but VISIBLE in Firebug - Firefox 3.6CSS3 背景大小在 Firebug 中不起作用但可见 - Firefox 3.6
【发布时间】：2011-06-10 16:25:48
【问题描述】：

我正在使用新的 CSS3 规范“背景尺寸”来制作稍微超出页面大小的背景图像。它在 webkit（Chrome 和 Safari）中运行良好，但“-moz-background-size”属性在 Firefox 中根本不起作用。不同寻常的是，如果您实时查看该站点，使用 Firebug 查看该站点时会显示“-moz-background-size”属性IS！ 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

【问题讨论】：

见我上面的编辑，抱歉。

标签： html css

【解决方案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;

【讨论】：

谢谢！我在使用 javascript 设置属性时遇到了同样的问题——在 backgroundsize 不起作用之后设置 url。直到我读到这篇文章才知道发生了什么。
那是因为后面的声明会覆盖其他的。例如：background:blue; background:red
很好的答案！谢谢
developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties 看看Tricky Edge Cases
在最新的 chrome 中为我解决了同样的问题。

【解决方案2】：

这原来是我的一个 CSS 错误，我有一个

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

稍后页面以某种方式覆盖了 Firefox “-moz-background-size: 130%”。所以，如果你有麻烦，给

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

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

【讨论】：

【解决方案3】：

在 Firefox 3.6、Firefox 4.0 和 Chrome 中，您的页面在我看来是一样的，但我在其中都看不到任何 background-size？您是否有指向实际演示问题的页面的链接？

我最初的建议是指定宽度和高度，看看是否可行：

-moz-background-size: 130% 130%;

【讨论】：

感谢您的尝试！不幸的是，这并没有做到：（我在原始问题中发布了一个指向实时站点的链接。又是：anasmadance.com.s66112.gridserver.com 指定两个轴（根据您的建议）并没有解决问题。
在所有浏览器中为我注册背景大小 - style.css 的第 139 行：anasmadance.com.s66112.gridserver.com/wp/wp-content/themes/…
@Brian 好的，我没有看到媒体查询，我正在全屏查看。我在 Firebug 中看到 -moz-background-size 但它报告为 -moz-background-size: 70% auto; 而不是 130%，这可能只是一个错误。如果您尝试使背景更小（例如 50%），您的页面是否在所有浏览器中都做同样的事情？
哈哈。罗伯特，我将其更改为 70% 以进行调试。我想也许 Firefox 没有为 background-size 注册超过 100% 的值，所以我尝试了更小的值。当我更新该规则时，网站上仍然没有任何变化。它适用于 Safari 和 Chrome - 现在在 Firefox 中将其更改回 130%。
@Brian 好的，然后一个谜团解开了！我认为最好的方法是尝试创建一个简单的测试用例——只是一个只有背景图像的简单页面——然后看看问题是否仍然存在。如果没有，那么您可以开始增加复杂性以查看触发问题的原因，但就像我说的，这可能只是一个错误（毕竟这是实验性的东西）。

【解决方案4】：

从

更改您的 CSS 背景

background:url(../imgs/logo-x2-retina.png) no-repeat;

到

background-image:url(../imgs/logo-x2-retina.png);

【讨论】：

【解决方案5】：

我写道：背景尺寸：100% 100%，自动；所有的工作

【讨论】：

background-size: 100% 100%, auto; 用于多个背景图像，问题中未提及。 , 分隔符表示设置第二个背景的大小。