极客观点
项目管理
HarmonyOS
我想给表格的每一行(tr）增加一个从左到右背景色的渐变,
在谷歌浏览器中显示的是正常的,如下图
但是在Safari浏览器中，却是每个单元格(td)都显示了渐变的背景色,如下图
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr{
background-color: #1FA9F4; /* Old browsers */
background-image: -moz-linear-gradient(right, red 0%, green 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left right, left right, color-stop(0%, red), color-stop(100%,green)); /*Chrome,Safari4+*/
background-image: -o-linear-gradient(right, red 0%, green 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(right, red 0%, green 100%); /* IE10+ */
background-image: linear-gradient(to right, red 0%, green 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='green',GradientType=0 ); /* IE6-8 */
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>姓名11</td>
<td>电话111</td>
<td>住址111</td>
</tr>
<tr>
<td>姓名22</td>
<td>电话222</td>
<td>住址222</td>
</tr>
</tbody>
</table>
</body>
</html>
这说明safri中的tr不支持背景渐变。
可以尝试用tr背景透明，并给其加上伪元素::after,然后将伪元素设置为z-index=-1的块级元素，在这个div上应用背景渐变。