Question

为什么这个CSS3渐变在IE9中不起作用。它只显示普通的背景颜色，没有任何渐变。它有什么问题吗？感谢。

background: #999; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
background: -moz-linear-gradient(top,  #ccc,  #000);

Answer 1

IE9是否真的支持渐变？我知道它不支持很多CSS3。您可以尝试查看this文章，它在使用渐变时有一个IE的解决方法。

关于您的代码，您可能还需要以下行：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";

或者也将GradientType=0添加到您的过滤字符串中。（来自this网站）

Answer 2

这是一个很好的解决方案，使用PHP来返回SVG渐变，这使我们可以将我们的设计保留在样式表中。

<?

header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/>
</svg>

只需将其上传到您的服务器并按如下方式调用URL：

gradient.php?from=f00&to=00f

这可以与你的CSS3渐变一起使用：

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

如果您需要定位到IE9以下，您仍然可以使用旧的专有“过滤器”方法：

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

当然，您可以修改PHP代码以在渐变上添加更多停靠点，或使其更复杂（径向渐变，透明度等），但这对于那些简单（垂直）线性渐变非常有用。

Answer 3

您有以下代码：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

我认为您应该将其更改为：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCCFF, endColorstr=#000000FF);

Answer 4

IE上渐变的最佳解决方案是使用渐变图像和repeat-x。把它放在后台和你想要的地方。并非所有浏览器都能干净地绘制渐变，并且当您这样做时它们会消失。

<table id="tabs_desc" cellpadding="0" cellspacing="0" width="100%"
  style="
    background:url('blue_gradient.png') transparent repeat-x;
    *background:url('blue_gradient_long.png') transparent repeat-y; /* Special for IE */
    width:  100%;
    background-size: contain;
    color:  #fff;
    padding: 10px;
    font-family:  Calibri;
    font-size:  11pt;
    font-weight:  bold;
    "
> ...

希望这有帮助！

IE中的CSS3 Gradient问题

4 个答案: