1

我正在尝试将透明的 CSS 渐变和背景图像结合起来，并在不支持渐变的浏览器中优雅地失败。

我有这个 CSS，它在 Webkit 浏览器中运行良好，但似乎被显示为白色背景的非 Webkit 浏览器（例如 Firefox）完全忽略：

body {
  height:100%;
  -webkit-font-smoothing: subpixel-antialiased;
  padding-top: 2%;
  padding-bottom: 2%;
  background: -webkit-gradient(linear, left top, right top,
    from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
    color-stop(0.03, rgba(0,0,0,0.2)),
    color-stop(0.06, transparent),
    color-stop(0.94, transparent),
    color-stop(0.97, rgba(0,0,0,0.2))),
     url(../img/myimg.jpg) repeat;
}

但是，如果我将背景设置为：

  background: url(../img/myimg.jpg) repeat;

相反，它在 Firefox 中运行良好。Firefox 不应该忽略-webkit-gradient规则的一部分吗？我怎样才能使这个 Firefox 友好？

4

3 回答 3

2

您应该尝试使用标准的、无前缀的线性渐变语法 - 现在已得到广泛支持：IE10、chrome 26（当前为 27）、firefox 16（当前为 20）、opera 12.1（最新版本）。要支持移动浏览器，您还需要带有 webkit 前缀的版本。

使用您的示例渐变，标准语法是......

background: linear-gradient(to left, 
    rgba(0,0,0,0.4), rgba(0,0,0,0.0) 6%, rgba(0,0,0,0.0) 94%, rgba(0,0,0,0.4));

您可以在jsfiddle 示例中看到这一点。

于 2013-05-07T14:24:34.793 回答
1

如果该值无效，firefox 之后将不会读取任何内容；在这里，您的背景被忽略，因为-webkit 它是 firefox 的未知属性值，因此在您的示例中，-webkit首先是 firefox 的未知值，因此它将跳过该值并移至该类中的下一个属性。例如

background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif'); 
/* asadsa is invalid here, so firefox will skip to next property */

演示

CSS

div {
    background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif');
                ---^---
  /* Invalid Value For Property background */ 
    height: 200px;
    width: 300px;
    border: 1px solid #f00;
}
于 2013-05-07T13:56:01.940 回答
1

Firefox 不只是忽略规则的“那部分”。当 Firefox 无法识别其中的一部分时，它会忽略整个规则。

这意味着您可以指定多个规则，Firefox 只会选择它理解的规则：

body {
  height:100%;
  -webkit-font-smoothing: subpixel-antialiased;
  padding-top: 2%;
  padding-bottom: 2%;
  background: url(http://lorempixel.com/400/200/) repeat;
  background: -webkit-gradient(linear, left top, right top,
    from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
    color-stop(0.03, rgba(0,0,0,0.2)),
    color-stop(0.06, transparent),
    color-stop(0.94, transparent),
    color-stop(0.97, rgba(0,0,0,0.2))),
     url(http://lorempixel.com/400/200/) repeat;
}

小提琴：http: //jsfiddle.net/yb5AE/

Firefox 理解第一background条规则，但不理解第二条。因此使用第一个。Webkit 理解这两者，因此第二个覆盖第一个，因为它被声明为“稍后”，因此使用第二个。

于 2013-05-07T14:00:13.713 回答