具有水平漸變的CSS背景圖像

Question

我有一個問題，使用具有漸變的圖像作爲主菜單欄的背景圖像。

這就爲背景的圖像：

正如你可能知道，像有2個梯度，第一，很遠的左，其次3/4的權利。我想實現的是這樣的：

有誰知道做到這一點的最佳做法？我知道唯一的問題就是瀏覽器的寬度，在那裏我需要確保最左邊的是以非常淺的灰色開始。最右邊，將是深灰色。

，我有另外一個問題是主頁的中心梯度：

這是一個有點容易，可以通過CSS梯度來完成。不過，我一直試圖從中心開始設置漸變開始，在黃色div後面。

如果有人知道如何實現這個最好的方法，那將是非常棒的。

謝謝你提前幫忙。

Answer 1

如果只是使用圖像作爲背景圖像？

<div style="width: 896px; height: 20px;background-image: url(bg.png);"><div style="padding-left: 250px;">test</div></div> 

Answer 2

要做到這一點純粹的CSS，你可以把兩個集裝箱每一個梯度，這樣，他們可以改變寬度，它仍然看起來是一樣的。

例如

HTML：

<div id="container"> 
    <div id="gradient1"></div> 
    <div id="gradient2"></div> 
</div> 

CSS：

.container { ..... } 
.gradient1 {width:60%; float:left; GRADIENT} 
.gradient2 {width:40%; float:left; GRADIENT}