расположение разного цвета линейного градиента

Question

Использование background: linear-gradient(to bottom, #fff, #ff0, #f00, #000) устанавливает его фон одинаково

Могу ли я дать значение местоположения для этих цветов, как можно достичь, как это с помощью CSS3

Answer 1

Вы можете использовать блоки, например % или px, чтобы их разделить

Demo (Не то резкое, но вы можете изменять его в соответствии с вашими требованиями)

background: #fffea1; 
background: -moz-linear-gradient(top, #fffea1 1%, #fb8000 45%, #df0000 59%, #3f0000 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fffea1), color-stop(45%,#fb8000), color-stop(59%,#df0000), color-stop(100%,#3f0000)); 
background: -webkit-linear-gradient(top, #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%); 
background: -o-linear-gradient(top, #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%); 
background: -ms-linear-gradient(top, #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%); 
background: linear-gradient(to bottom, #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffea1', endColorstr='#3f0000',GradientType=0); 

Вот handy tool создавать сложные градиенты с легкостью