背景顏色有效，但圖像無效。 不知道為什么

Question

我正在創建一個投資組合站點，但是我只具備一定的編碼能力，因此我從各種示例中將其整合在一起。 我為菜單添加了這個覆蓋div，我希望它具有背景圖像，而不只是黑色。 但是，由於某些原因，即使我可以更改顏色，也無法添加背景圖像。 它只是不會出現。 除此之外，我似乎無法在此總覽div中放置的任何div上添加背景圖片。

我的網站是http://www.madebyandrew.com

如果單擊菜單，您將看到黑色覆蓋div。 我希望能夠轉到我的menustyle.css工作表，並在.overlay中添加：

background-image:url('images/menu1/background1.jpg'); 

但這似乎無能為力！ 我不知道我要去哪里錯了，所以我想知道是否有人可以幫助我。

謝謝！

編輯

感謝您的回答，我已經嘗試過建議將../放到菜單樣式.css的第8行的站點上。 但是，這仍然沒有為我做任何事情，實際上，我已經嘗試過了。 任何其他想法，將不勝感激！

Answer 1

在.css上執行background-image:url(path)時，該文件的path是相對的。

因此，如果需要從另一個文件夾獲取圖像，則應使用：

background-image:url('../images/menu1/background1.jpg')

這兩個點將使您一個目錄（在您的情況下，返回站點的根目錄），然后在正確的文件夾中找到該圖像。

Answer 2

只需添加background: url(../images/tc4.jpg); 將CSS放入顯示菜單的父div的CSS文件中。 圖像將顯示。

Answer 3

就像丹尼斯·阿里 （ Denis Ali）回答的一樣

在.css上執行background-image：url（path）時，路徑是相對於該文件的。

使用/css/menu/目錄中的文件menustlye.css （包含class overlay樣式的文件）目錄，如果使用

url('images/menu1/background1.jpg');

它將在目錄/css/menu/images/menu1查找background1.jpg 。 如果您正在使用

url('../images/menu1/background1.jpg');

它將1目錄移動到/css並在目錄/css/images/menu1找到background1.jpg

這意味着您的目錄是錯誤的，所以我寧願使用相對於根目錄的目錄，像這樣使用/

url('/images/menu1/background1.jpg');

這將從根目錄查找dir /images/menu1/

Answer 4

只需在以下代碼中使用style="background: url('images/menu1/background1.jpg')"

![<div id="menuContents" style="background: url('images/menu1/background1.jpg')">

            <div id="menuClear">    
            </div>

            <ul id="menuList">

                <li class="bgButton"><a href="#">NZSki</a></li><br>
                <li class="bgButton"><a href="#">Theta</a></li> <br>
                <li class="bgButton"><a href="#">Ports of Auckland</a></li> <br>
                <li class="bgButton"><a href="#">Total Compliance</a></li> <br>
                <li class="bgButton"><a href="#">Ted's Grooming Room</a></li> <br>
                <li class="bgButton"><a href="#">Coffee &amp; Jam</a></li> <br>
                <li class="bgButton"><a href="#">Treble Seven</a></li> <br>
                <li class="bgButton"><a href="#">Diacle</a></li> <br>

            </ul>



        </div>][1]

Answer 5

很簡單，您需要在CSS中進行一些更改，請嘗試使用以下代碼，它可能會對您有所幫助

 .example{ background: url(../images/x.png) 0px 0px rgba(0,0,0,0.4); height:xpx; // Give a height according to requirement width:ypx; // Give a width accroding to requirement } 

希望它能工作。 否則，您必須使用不透明度將圖像和div放置在固定位置。