多种背景：Moz/Webkit 渐变、IE 回退

Question

是的，另一个 IE 后备问题。 ;-) 我在 SO 看过其他人，其中大多数都不是多个背景。

IE=9 支持。对于这两者，我完全没问题，甚至没有让它们“多个”，而是让它们简单地平铺图像以供后备。

这是我现有的 CSS：

.main_accent { 
  background-image: url('../img/background.png');
  background-repeat: repeat;
  background-image: url('../img/fringe.png'), -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)), url('../img/background.png');
  background-image: url('../img/fringe.png'), -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)), url('../img/background.png');
  background-position: bottom, center, center;
  background-repeat: repeat-x, no-repeat, repeat;
  padding-bottom: 40px;
}

第一个背景图像和重复声明适用于旧版浏览器。然后是 Webkit 和 Mozilla 的多背景图像声明。这些工作正常，以及它们的伴随位置和重复。

“图像”需要按此顺序排列，因为首先填充瓷砖，然后覆盖渐变，然后底部“边缘”（类似于我们都见过的粉红色剪刀效果）完成底部。

问题在于，IE9 或更高版本支持多个背景，但供应商前缀当然会被忽略。这使得 IE9+ 使用普通的非多“背景”规则，但使用第一个位置和重复选项（底部，repeat-x）。我尝试了 3 次简单地使用相同图像的另一个背景图像，但这并不好。

有什么想法吗？

[更新：] 使用速记，但仍然没有运气。 IE 无论如何都想在底部使用那个 repeat-x：

.main_accent { 
  background: url('../img/background.png') repeat;
  background: url('../img/fringe.png') repeat-x bottom, -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)) no-repeat center, url('../img/background.png') repeat center;
  padding-bottom: 40px;
}

Answer 1

好吧，FWIW 这就是我最终要做的：

#wrapper > .container:first-child { 
  background: #69000c url('../img/background.png') repeat;
  background: url('../img/fringe.png') repeat-x bottom, -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%), url('../img/background.png') repeat center; /* Opera 12+ */
  background: url('../img/fringe.png') repeat-x bottom, -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%), url('../img/background.png') repeat center; /* IE10+ */ 
  padding-bottom: 40px;
}

在过滤器方面，我没有为 IE 做一个例外。支持标准声明和径向渐变属性（即将推出的 IE10）的 MS 浏览器会很好。否则我发现没有比好的 ol' 条件更聪明的选择了：

<!--[if lte IE 9]>
  <style type="text/css">
#wrapper > .container:first-child {
    background: #69000c url('/wp-content/themes/roots/img/background_darker.png') repeat;
}
  </style>
<![endif]-->

因为我的径向渐变显着变暗，所以我制作了一个新的平铺图案，它普遍更暗。这比简单平铺时有点太亮的“基础”平铺图案更可取。

在 IE9 或更低版本中，我显然也不担心“边缘”效应。可以用一个额外的 div 来做到这一点，但这不是必需的。一条直线对我来说已经足够优雅了。将条件放在原始样式表之后也很重要，以便它可以正确“覆盖”之前的内容。