有兩臺DIV類：一bar嵌套了menu如何設置一個響應背景圖片與CSS
background-image放在bar上課的時候沒有正確縮放或響應，並沒有出現時放置在menu班，它看起來適合作出風格迴應。
此外，圖像是PNG，但在空白區域用白色空間渲染...爲什麼會這樣？
現在都測試爲內聯樣式，但是在嵌套在'css'文件夾中的外部樣式表中，如何將圖像指向'css'文件夾路徑旁邊的'img'文件夾？
.bar {
position: static;
bottom: 0;
height: 10%;
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.menu {
display: inline-block;
background-image: url("img/menu-bar.png");
}
您在這裏提出幾個問題：
響應能力...背景圖像應與瀏覽器的高度/寬度比例適當..
當前CSS。因此，爲了：
默認情況下，background-image將被以實際大小重複。如果你想擴展，你應該設置background-size並可能禁用background-repeat。要將圖像縮放到容器的大小，可以設置background-size: 100% 100%;，或者可以使用background-size: cover將容器填充到較小的尺寸上，然後剪掉其餘部分。另一種選擇是使用background-size: contain來避免裁剪圖像。
至於路徑問題，路徑總是相對於CSS文件。因此，如果像您說的那樣，樣式表位於與img文件夾相鄰的css文件夾中，則只需設置相對於css文件夾的路徑即可。
您最終可能CSS看起來是這樣的：
.menu {
display: inline-block;
background-image: url(../img/menu-bar.png);
background-size: cover;
background-color: transparent;
background-repeat: no-repeat;
}
注意，我去掉引號，因爲他們是沒有必要的。
最後，如果您的透明度不起作用，那麼圖像文件本身肯定有問題。 CSS與PNG透明度無關。確保您的圖形編輯器正在以適當的透明度保存PNG。
你所說的一切都是完全有道理的，並且這些樣式被放置在'bar'CSS中，它完美地工作，所以非常感謝。不管出於什麼原因，但是當這些樣式寫入'menu'類，它嵌套在'bar'類中。任何關於爲什麼的想法？ – sourcingsynergy
另外，圖片的透明度保持不變，它似乎與酒吧的10％高度有關，這有意地導致頁面內容的其餘部分從酒吧上方滾出。這可能適合於另一個問題，但是10％的身高可以用於圖像，而且是透明度？ – sourcingsynergy
我認爲你的問題與你的定位和顯示模式有關......沒有寬度或高度的「display：inline-block」只是內容的大小，所以如果你沒有內容，div將不可見。您可能想要嘗試使用寬度和高度的「display：block」。給父母'位置：親戚;'讓孩子包含在其中。 – nullability
您應該嘗試回答問題，而不是僅添加鏈接。該頁面有一天可能會消失，您的帖子將無法獲得信息。 –
「不工作」是一個非常廣泛的術語。什麼_exactly_不工作 - 請更詳細地解釋您的問題 – Bojangles
background-size：cover ???? – Rooster
你確定背景圖片的路徑是正確的嗎？這通常是丟失背景圖像的問題。 –