css - 动态-webkit-linear-gradient
问题描述
我需要动态地用不同的颜色填充表格中的行。我用:
-webkit-linear-gradient
例如,我有,#729fcf 20%, #93971c 20% 30%, #16eab7 30% 20%, #427b70 20% 20%, #861d53 20% 10%
但我得到三种颜色而不是五种
颜色和列数可能不同,不应相互依赖。 http://jsfiddle.net/01wy9Lso/1/
* {margin:0;padding:0;border:0;border-collapse:collapse;}
table {
width:100%;
}
th {
border: 2px solid black;
}
tbody {
background: -webkit-linear-gradient(left, #729fcf 20%, #93971c 20% 30%, #16eab7 30% 20%, #427b70 20% 20%, #861d53 20% 10%);
background-attachment:fixed;}
thead tr, thead th { background:transparent; }
/* #a13131 #93971c #93971c #16eab7 #861d53 #427b70 */
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
</tbody>
</table>
解决方案
您误解了颜色停止的工作原理,它们需要始终递增:
* {
margin: 0;
padding: 0;
border: 0;
border-collapse: collapse;
}
table {
width: 100%;
}
th {
border: 2px solid black;
}
tbody {
background:
linear-gradient(to left,
#729fcf 20%,
/* 20% = the value of the previous color */
/* 50% = 20%
+ 30% (the with of the color) */
#93971c 20% 50%,
#16eab7 50% 70%,
#427b70 70% 80%,
#861d53 0); /* the last one can be 0 and it will take the remaining */
background-attachment: fixed;
}
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
</tr>
</tbody>
</table>
推荐阅读
- c# - 如何在格式化的命名空间内移动 using 指令?
- spring-boot - Spring Boot Redis 根据 TimeToLive 每天或每小时刷新/重置
- arrays - Nest.js 数组 dto 验证和转换日期为字符串
- database - 多个 RDBMS 数据库的单个 Spring 引导
- html - 如何使用带有选择元素的 Isotope.js 对帖子进行排序?
- c# - 级联组合框不会显示更新的值
- python - 加载 Cheexpert 图像数据集时出错
- javascript - swiper 中 longSwipes 和 shortSwipes 配置有什么用?
- firebase - Firebase Flutter 身份验证登录环境
- automation - SikuliLibrary - 机器人框架不要通过远程桌面连接在文本框中输入文本或粘贴文本