Question

我有一个表格，其行的颜色带有线性渐变背景图像，这在Firefox和Chrome中运行良好 - 但在IE / Edge中则不行。正如你在下面链接的JSFiddle中看到的那样，渐变在IE中的一个简单div元素中起作用 - 但是当应用于表行元素时则不行。

线性背景示例：

.gradient {
 background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%); 
}

这是我想要完成的JSFiddle： https://jsfiddle.net/q9jkoa52/

我在几个平台上遇到过类似的问题，但所有提议的修复我都没有看过工作，或者无法自己开始工作。即使在IE中打开“固定”的JSFiddles，实际上也没有修复。

有没有办法让它发挥作用？

Answer 1

经过多次摆弄，我得出了这个结果，希望它有所帮助（注意不同的渐变CSS规则;你需要根据你的喜好来玩这些值;还有：只在IE中测试过）：

＆＃13;

.gradient {
 background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%); 
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.gradientRow {
 background-image: linear-gradient(210deg, #FFF133 51%, #16D611 61%, #00A3EF 67%); 
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.solid {
  background-color: aqua;
}
.box {
  width:200px;
 height:200px;
}
table, tr, td, th {
  border: 2px solid black
}

＆＃13;

<div class="gradient box"></div>
<table>
<thead>
  <tr>
    <th style="width:20%;">Column 1</th>
    <th style="width:50%;">Column 2</th>
    <th style="width:30%;">Column 3</th>
  </tr>
</thead>
<tbody>
  <tr class="solid"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr class="gradient"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>

＆＃13;

Answer 2

如果只留下postgres@pop-os:/home/peyton$ psql -p 5432 psql: error: could not connect to server: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?，效果很好

background-attachment: fixed;

并应设置表.gradient { background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%); background-attachment: fixed; }

表行上的渐变背景在IE中不起作用

2 个答案: