半透明漸變圖像變暗而不去飽和

Question

我正在設計一個網站，它將爲側邊菜單設置多個嵌套div。每個div的背景都比圍繞它的div更暗。

我想爲每個div在背景中有一個漸變效果，它從一個稍深的藍色到div的背景顏色。

我知道CSS3內置了對漸變的支持，但舊版瀏覽器無法顯示它們，所以這不是一個選項。相反，我一直在爲每個div創建一個PNG背景。

但是，這個PNG背景選項不是超級可持續的。如果我決定需要與背景略有不同的顏色，則必須使用該新顏色創建新的PNG。煩人。

我希望我可以在所有div中使用單個半透明灰色至透明PNG圖像，以便我可以自由更改背景顏色。但使用這樣一個PNG的問題是，它的飽和度和暗淡而不是深色...

是否有任何方法來操縱這樣的PNG，使其覆蓋而不管它去飽和度？

Answer 1

你去那裏：

your-element{ 
    background-color: #444444; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 
    background-image: -webkit-linear-gradient(top, #444444, #999999); 
    background-image: -moz-linear-gradient(top, #444444, #999999); 
    background-image:  -ms-linear-gradient(top, #444444, #999999); 
    background-image:  -o-linear-gradient(top, #444444, #999999); 
    background-image:   linear-gradient(to bottom, #444444, #999999); 
} 

和你的IE瀏覽器規則：

your-element{ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); 
     zoom: 1; 
} 

易peasy跨瀏覽器兼容的說，你的瀏覽器的99％。