Question

我已经开始使用PIE样式绘制渐变的网页（用于IE9，本地标准）。 渐变有效，看起来不错。开始在页面中添加其他功能，渐变消失了。完成了我所做的所有改变，但它仍然无法正常工作。

当页面加载时，您可以在背景设置为全白之前看到渐变闪光。

它在Chrome中有效。

如果我退出渐变工作时所做的所有更改，我不明白发生了什么变化。

<!DOCTYPE html>
<html>
    <head>
        <title>Training Registration Admin</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            hr{
                border-color: ivory; //Chrome and Safari
                background-color: ivory; //firefox and Opera
                color: ivory; //IE9
            }
            div, table{
                width: 100%;
            }
            html{
                height: 100%;
            }
            body{
                color: ivory;
                background: #000000;
                background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000), to(#48525C));
                background: -webkit-linear-gradient(#000000, #48525C);
                background: -moz-linear-gradient(#000000, #48525C);
                background: -ms-linear-gradient(#000000, #48525C);
                background: -o-linear-gradient(#000000, #48525C);
                background: linear-gradient(#000000, #48525C);
                -pie-background: linear-gradient(#000000, #48525C);
                behavior: url(stylesheets/PIE/PIE.htc);
            }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td style="width: 33%;text-align: center;">
                        <img src="images/traininglogo.png" />
                    </td>
                    <td style="width: 33%; text-align: center;">
                        <h1>Department Training Scheduler</h1>
                    </td>
                    <td style="width: 33%;text-align: center;">
                        <img src="images/traininglogo.png" />
                    </td>
                </tr>
            </table>
            <hr>
        </div>
    </body>
</html>

Answer 1

我之前使用过PIE.htc来实现IE9中的渐变，虽然我发现SVG文件是更好的方法。

这里有一个SVG文件示例：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
      <stop offset="0%"   stop-color="#000000" stop-opacity="1"/>
      <stop offset="100%" stop-color="#48525C" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect width="100%" height="100%" style="fill:url(#myLinearGradient1);" />
</svg>

要在代码中使用它，只需执行以下操作：

header {
  background-image: url("svg-gradient.svg");
}

IE9的PIE样式停止工作

1 个答案: