Question

我有一个HTML表格，并尝试使用style上的<td>属性添加渐变。这适用于IE，但不适用于Firefox，Opera或Chrome。

<td height="100%" width="10%" valign="top"
    style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#6487DB'‌, endColorStr='#003366', gradientType='0');" >
</td>

如何在Firefox等中使用它？

Answer 1

此：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#6487DB'‌, endColorStr='#003366', gradientType='0');

是IE特定的代码。它不应该在其他浏览器中工作。有关在其他浏览器（支持css3）中执行此操作的方法，请参阅css3please。

编辑： 从我之前发布的链接中复制并修改为正确的颜色

  background-color: #6487DB;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6487DB), to(#003366)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #6487DB, #003366); /* Chrome 10+, Saf5.1+ */
  background-image:    -moz-linear-gradient(top, #6487DB, #003366); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #6487DB, #003366); /* IE10 */
  background-image:      -o-linear-gradient(top, #6487DB, #003366); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #6487DB, #003366);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6487DB', EndColorStr='#003366'); /* IE6–IE9 */

Answer 2

'filter：progid：DXImageTransform.Microsoft.gradient'语句仅适用于Internet Explorer！将此代码添加到样式表中：

<style>
.mygradientstyle{
background:#6487DB; /* Old browsers */
background:-moz-linear-gradient(top,#6487DB 0%, #003366 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6487DB),color-stop(100%,#003366)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#6487DB 0%,#003366 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#6487DB 0%,#003366 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top,#6487DB 0%,#003366 100%); /* IE10+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6487DB ', endColorstr='#003366',GradientType=0 ); /* IE6-9 */
background:linear-gradient(top,#6487DB 0%,#003366 100%); /* W3C */
}
</style>

...然后在源代码中使用“mygradientstyle”类打电话给你：

<td height="100%" width="10%" valign="top" class="mygradientstyle">

...这应适用于所有浏览器。

如果您想要一个从左到右的渐变，请使用以下代码：

<style>
.mygradientstyle{
background:#6487DB; /* Old browsers */
background:-moz-linear-gradient(left,#6487DB 0%,#003366 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#6487DB),color-stop(100%,#003366)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(left,#6487DB 0%,#003366 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(left,#6487DB 0%,#003366 100%); /* Opera11.10+ */
background:-ms-linear-gradient(left,#6487DB 0%,#003366 100%); /* IE10+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6487DB', endColorstr='#003366',GradientType=1); /* IE6-9 */
background:linear-gradient(left,#6487DB 0%,#003366 100%); /* W3C */
}
</style>

同样，代码段background:-o-linear-gradient(left,#6487DB 0%,#003366 100%); /* Opera11.10+ */应该适用于Opera 10或更高版本。 Opera 9或更低版本是我所不知道的，但认为不支持渐变。关于那个人的任何见解？

标记中的样式属性在Firefox中不起作用

2 个答案: