與CSS梯度

我使用一個圖像可固定寬度的div id爲header背景更換背景圖片，相關的CSS規則是與CSS梯度

#header { 
    background: url("bg.png") no-repeat scroll center top rgba(0, 0, 0, 0); 
}

我試圖使這個頁面更加敏感，這意味着header的寬度現在是可變的。在無響應頁面中，header元素始終與背景圖像的寬度相同，但在響應式設計中元素可能比圖像更寬或更窄。我需要在響應式頁面中使用相同的背景樣式，但是當元素和圖像的大小不匹配時，我無法找到這樣做的方法。

2014-06-16 Dónal

嘗試使用['背景size'（https://developer.mozilla.org/en-US/文檔/網絡/ CSS /背景大小）。它應該有助於你的情況。 –

您是否嘗試過'background-size：cover;'或'contains'？ - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images –

如果您選擇遠離使用圖像，這是生成CSS背景漸變的絕佳資源：http：// www.colorzilla.com/gradient-editor/ – user2250471

你可以考慮

background: url("bg.png") repeat-y top left; 
background-size: cover;

2014-06-16 14:28:14 Tom

你的回答是正確的，但請使用mdn作爲參考。 w3schools不被許多高級開發人員推薦。特別在這裏。（_我不是downvoter_） –

任何人都在意詳細說明-1？ – Tom

我特別選擇了w3schools，因爲它提供了一種測試多種背景大小選項的簡單方法。鑑於這個問題的性質，這可能是多納爾正在尋找的東西。 – Tom

回答