Html 在IE中组合背景图像和CSS3渐变

我想结合背景图像和梯度。它应该在IE中工作。我的图像是3倍宽和3倍高。我打算重复一下背景。我们怎样才能为Internet Explorer做到这一点

提前谢谢

background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL),    -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: url(IMAGE_URL),     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: url(IMAGE_URL),      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: url(IMAGE_URL),         linear-gradient(top, #444444, #999999); /* W3C */

前两行是任何不进行渐变的浏览器的后备。请参见下面的堆叠图像注释，即<9

第1行设置平面背景色

第2行设置背景图像回退

其余部分为特定浏览器设置背景图像和渐变

第3行适用于旧的webkit浏览器

第4行用于更新的webkit浏览器

第5行适用于Firefox 3.6及更高版本

第6行用于Internet Explorer 10

第7行是11.10及以上的歌剧

第8行是有一天所有浏览器都希望使用的

有关详细信息，请参阅

有关跨浏览器css3模板，请参见。目前，它不允许您使用渐变设置多个背景，但它会为您提供浏览器前缀并保持最新

仅堆叠IE<9的图像（声明中没有渐变）

IE9和更高版本可以以同样的方式堆叠图像。你可以用它为ie9创建一个渐变图像，但我个人不这么认为。但是需要注意的是，当只使用图像时，ie<9将忽略回退语句，而不显示任何图像。如果包含渐变，则不会发生这种情况。要在本例中使用单个回退图像，我建议使用Paul Irish的精彩条件HTML元素以及回退代码：

.lte9 #target{ background-image: url(IMAGE_URL); }

---

如果您需要针对IE9或更早版本的IE，它们不支持CSS渐变

使用

过滤器

和其他黑客有一些变通方法，但是如果你也想要背景图像，你将很难让这些方法发挥作用

因此，我的建议是使用polyfill脚本。这个库为旧的IE版本添加了渐变支持。它应该能做你想做的事

在CSS中，您将得到如下代码：

#myElement {
    background: url(bg-image.png) #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png), -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png), -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png), -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png), -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*CSS3-compilant browsers*/
    -pie-background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}

---

有关更多信息，请参阅。

如果您有试用过的代码，请在中共享jsfiddle@fags等一下，我会在JSFIDLE和share中完成这项工作。请指定您所针对的IE版本——这会产生很大的不同，特别是像这样的事情。@fags-jsfiddle@Spudley我的目标是IE7，ie8 fiddle在这里jsfiddle.net/r8se7这对IE9+有效。Ie IE10不需要

-ms-

前缀（除非你支持IE10预览版，但真的没有必要这样做）+1票支持帮助我，我在Spudley中找到了解决方案，谢谢你，我可以在本节中给出图像吗过滤器：progid:DXImageTransform.Microsoft.gradient（GradientType=0，startColorstr='#e9e9e9'，endColorstr='#ffffff'）}看起来是这样的：

filter:progid:DXImageTransform.Microsoft.Gradient（GradientType=0，startColorstr=#000000，endColorstr=#3c3c）

。但是，正如我所说，请注意：它可能无法正常工作，尤其是如果您想将其与背景图像结合使用。请参见。只需将其粘贴到网站根目录中，并在

行为
样式中链接到它，IE就会识别
-饼背景
样式，并且渐变也会正常工作。同样，饼图文档如果您需要的话，s页面会提供更多信息。这是一个非常有用的会话…谢谢@Spudley