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

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

前 2 行是任何不做渐变的浏览器的后备。请参阅以下仅 IE

第 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

IE9 及更高版本可以以同样的方式堆叠图像。您可以使用它为 ie9 创建渐变图像，但就个人而言，我不会。但是需要注意的是，仅使用图像时，即

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

Answer 2

如果您需要针对 IE 版本 IE9 或更早版本，它们不支持 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 了解更多信息。