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。

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

1 个答案: