Question

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

IE＆lt; 9不支持多个背景，而IE＆gt; = 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 +使用普通的非多“背景”规则，但具有第一个位置和重复选项（底部，重复-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做例外。支持标准声明和径向渐变属性的MS浏览器（即将推出的IE10）将会很好。否则我发现没有比良好的条件更聪明的选择：

<!--[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来做，但没有必要。一条直线对我来说是优雅的弃用。同样重要的是将条件AFTER放在原始样式表之后，以便它可以正确地“覆盖”之前的样式。

多个背景：Moz / Webkit渐变，IE回退

1 个答案: