css - 结合背景图像和 css3- 渐变时 IE 中的问题

Question

我正在组合 CSS3 渐变和背景图像。它在 Chrome 和 FF 中运行良好，背景图像也重复出现。在 ie9 及以下版本中，我看不到背景图像。任何人都请帮助我

body{background: #d5cea6; /* Old browsers */
background-image:url("cc.png"), -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%); /* FF3.6+ */
background-image: url("cc.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70)); /* Chrome,Safari4+ */
background-image: url("cc.png"),-webkit-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Chrome10+,Safari5.1+ */
background-image:url("cc.png"), -o-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Opera 11.10+ */
background-image: url("cc.png"),-ms-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* IE10+ */
background-image:url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* IE6-9 */
}

这是我使用的代码

Answer 1

简而言之，不，这是行不通的。如果您尝试将背景图像和渐变组合到同一背景中，则无法使用 IE 的旧 filter 样式执行此操作。

我所知道的在旧 IE 版本中可靠地工作的唯一方法是使用 CSS3Pie library .

使用此库，可以在旧版 IE 中为各种现代功能(包括渐变)指定标准 CSS 代码。

下载 PIE.htc 脚本，将其添加到您的站点，然后将以下行添加到您的 CSS(并删除 filter 行):

-pie-background: url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);  /* PIE */
behavior: url(PIE.htc); /* change the URL as appropriate for your site */

现在，即使在非常旧的 IE 版本中，您的背景也应该与在现代浏览器中的行为相同。

希望对您有所帮助。

另见 the CSS3Pie documentation .