CSS背景圖片和默認背景？

Question

我有一個div這得到了一個背景顏色和圖像（具有透明背景）

我需要默認（白色）上在div不同的背景顏色與另一種顏色作爲背景爲透明圖像。

我怎樣才能解決這個問題？

我有現在這樣設置背景：

background: rgb(0,0,255) url(images/trans.png); 
background-repeat: repeat-x; 

所以重複停止時，我需要另一種背景顏色。

我想過一個漸變作爲背景，但我不知道如何與一個固定的像素POS過渡做到這一點（與％作品）

here i got the JSFiddle

Answer 1

你可以寫像素而不是百分比： UPDATE：與固體顏色接近例如：

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -moz-linear-gradient(top, rgb(0,0,255) 0px, rgb(0,0,255) 154px, rgba(255,255,255,0.5) 155px, rgba(255,255,255,0.5) 300px); 

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgb(0,0,255)),color-stop(154px,rgb(0,0,255)),color-stop(155px,rgba(255,255,255,0.5)), color-stop(300px,rgba(255,255,255,0.5))); 

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -webkit-linear-gradient(top, rgb(0,0,255) 0px,rgb(0,0,255) 155px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px); 

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -o-linear-gradient(top, rgb(0,0,255) 0px,rgb(0,0,255) 154px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px); 

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -ms-linear-gradient(top, rgb(0,0,255) 0px,rgb(0,0,255) 154px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px); 

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, linear-gradient(to bottom, rgb(0,0,255) 0px,rgb(0,0,255) 154px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px); 

http://jsfiddle.net/pBVsD/12/