CSS多重漸變顏色停止

Question

我已經創建了顏色的簡單的CSS酒吧停止使用如下：

#testing{ 
    width:100%; 
    height:40px; 
    background-image: -webkit-linear-gradient(left, #034a96 80%, #eab92d 50%); 
    background-image: -moz-linear-gradient(top, #034a96 50%, #eab92d 51%); 
    background-image: -ms-linear-gradient(top, #034a96 50%, #eab92d 51%); 
    background-image: -o-linear-gradient(top, #034a96 50%, #eab92d 51%); 
    background-image: linear-gradient(top, #034a96 50%, #eab92d 51%); 
     -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
      border-radius: 15px; 
} 

我想什麼做的是酒吧的前80％是有梯度從顏色＃034a96到＃0663c7從頂部開始，然後只是該顏色的50％。然後在另外51％的情況下，我從頂部用＃eab92d到＃c79810創建了另一個梯度。什麼我問的是，如果有可能有多個梯度與對方如：

background-image: -webkit-linear-gradient(left, top #034a96 to #0663c7 50%, top #eab92d to #c79810 51%); 

或者類似的規定。我希望我對一切都很清楚。在此先感謝

Answer 1

是的，你可以。 一個簡單的例子（不完全是你的colourset，但它顯示了計劃）：

background: #b8e1fc; /* Old browsers */ 
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */ 
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0); /* IE6-9 */ 

此代碼不能在IE創建多級梯度。 直到IE9，這些都不可能（只有簡單的漸變），但IE9支持SVG數據。編寫起來有點複雜，但你應該看看http://www.colorzilla.com/gradient-editor。這是一個用於創建漸變CSS代碼的在線工具。它也支持IE9的SVG漸變。