具有許多（20個以上）步驟的CSS背景顏色

我需要我的對象具有不同的背景顏色，具體取決於某個值。特別是，這是一個百分比條，理論上有100種不同的背景顏色（在空白時不考慮不存在的顏色）。自然條形的寬度從1到100％不等。我想知道，我怎麼能自動做出所有不同的色調？具有許多（20個以上）步驟的CSS背景顏色

我的基本想法是：如果我有一個100像素寬的圖像，每個像素都有不同的顏色，我會嘗試將背景寬度限制爲1像素，使用正確的偏移量，然後重複。這樣，它就是一個單獨的CSS屬性，偏移量，需要通過JavaScript進行更改，並且不需要切換100個不同的類。可悲的是，這不是背景大小，背景位置和背景重複工作的方式。所以我的問題是這樣的：我有什麼可能使它變得簡單，並且依賴於不超過3個線性依賴於百分比的數字CSS屬性？

在此先感謝。

編輯：我有一個想法，我試過了，它的工作原理。

我在photoshop中創建了一個精確到100像素高1像素寬的圖像。每個像素代表其百分比的顏色。所以，像素0將爲1％，像素99爲100％。然後，我至少將進度條的高度垂直拉伸該圖像。如果它是20px高，我將圖像拉伸至少20倍。拉伸需要使用最近鄰算法來完成，以防止應該沒有的梯度;每個像素只需要通過20因子垂直拉伸，因此每20個像素就會出現尖銳的邊緣。

將生成的圖像用作僅水平重複的背景圖像。使用圖像位置，我設置背景位置：0 - [（百分比1）* 20] px和寬度：[百分比]％。（方括號內的部分使用PHP或JavaScript或其他）計算。這就是它。只要百分比發生變化，我只需要更改這兩個值，並且背景會自動調整，無論其顏色如何。

來源

2013-02-08 arik

它是像Bootstrap的進度欄，你想要的東西？ http://twitter.github.com/bootstrap/components.html#progress – 2013-02-08 14:25:49

啊，是的，謝謝！除了略多於4個不同的版本。如果只有四個，那將是一個很好的方法。雖然也許我可以用PHP自動生成全部100個元素......無論哪種方式，我都會考慮它，非常感謝喲！ – arik 2013-02-08 14:45:28

是的，您可以在CSS中添加儘可能多的顏色 - 只需複製Bootstrap實現它們的方式 - 我認爲它們在每種顏色上都有輕微的漸變，但您顯然不必使用它。 – 2013-02-08 14:47:38

你的顏色有多不同？理論上，根據不透明度或背景色指定的alpha值，可以有100種不同的顏色。然後，您可以更改alpha以匹配使用html5數據屬性的欄的百分比。說你做了這樣的事情：

<div class="progress" data-percentage="<?php echo $percentage; ?>"></div> 

.progress { 
    background-color: blue; 
} 

jquery: 
$function() { 
$('.progress').css('opacity', $(this).data('percentage')); 
}

來源

2013-02-08 14:34:26 DMTintner

這將需要它是從一種顏色到另一種顏色的漸變。然而，可悲的是，事實並非如此。原則上，我只需重複背景圖像的一個像素寬度的部分，但能夠將該單像素蒙版向左或向右移動。 – arik 2013-02-08 14:37:46

具有許多（20個以上）步驟的CSS背景顏色

回答

相關問題