Question

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

先谢谢

Answer 1

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 */

前两行是任何不执行渐变的浏览器的后备。请参阅仅用于堆叠图像的注释IE＆lt; 9以下。

第1行设置平坦的背景颜色。

第2行设置背景图像后备。

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

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

第4行适用于较新的webkit浏览器。

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

第6行适用于Internet Explorer 10。

第7行适用于Opera 11.10及以上版本。

第8行是所有浏览器有望使用的日子。

有关详情，请参阅http://www.w3.org/TR/css3-background/#layering。

另请参阅http://css3please.com了解跨浏览器css3模板。目前，它不允许您使用渐变来执行多个背景，但它会为您提供浏览器前缀并保持最新。

仅堆叠图像（声明中没有渐变）对于IE＆lt; 9

IE9及以上可以用同样的方式堆叠图像。您可以使用它为ie9创建渐变图像，但我个人不会。然而，在仅使用图像时要注意，即＆lt; 9将忽略回退语句而不显示任何图像。包含渐变时不会发生这种情况。在这种情况下，为了使用单个后备图像，我建议使用Paul Irish的精彩条件HTML元素以及您的后备代码：

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

Answer 2

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

有使用filter和其他黑客攻击的解决方法，但是如果你想要背景图像，你也很难让它们正常工作。

因此，我的建议是使用CSS3Pie 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);
}

有关详细信息，请参阅CSS3Pie documentation。

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

2 个答案: