动态-webkit-linear-gradient

Question

我需要用不同的颜色动态填充 table 中的行。我使用：

-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>

Answer 1

你误解了色标的工作原理，他们需要总是递增：

* {
  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>

动态-webkit-linear-gradient

Dynamically -webkit-linear-gradient

css

linear-gradients