Динамически -webkit-linear-gradient - PullRequest
Новая
       87

Динамически -webkit-linear-gradient

0 голосов
/ 30 мая 2020

Мне нужно динамически заполнить строку в таблице разными цветами. Я использую: 

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

1 Ответ

1 голос
/ 30 мая 2020

Вы неправильно понимаете, как работает остановка цвета, им нужно всегда приращение: 

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