2

I want to combine background image and gradient. It should work in IE. my image is 3px width and 3px height. I am planning to give repeat for the background. How can we done it for Internet Explorer ???

Thanks in Advance

4

2 回答 2

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 < 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 < 9

IE9 及更高版本可以以同样的方式堆叠图像。您可以使用它为 ie9 创建渐变图像，但我个人不会。但是需要注意的是，仅使用图像时，即 < 9 将忽略回退语句并且不显示任何图像。包含渐变时不会发生这种情况。要在这种情况下使用单个后备图像，我建议使用 Paul Irish 的精彩 Conditional HTML 元素以及您的后备代码：

.lte9 #target{ background-image: url(IMAGE_URL); }
于 2013-10-11T11:24:42.080 回答
0

如果您需要针对 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 文档以获取更多信息。

于 2013-10-11T11:35:10.080 回答