背景颜色有效，但图像无效。不知道为什么

Question

我正在创建一个投资组合网站，但我的编码能力只是中等程度，所以我一直在从我能找到的各种示例中拼凑起来。我已经为菜单添加了这个覆盖 div，我希望它有一个背景图像，而不仅仅是黑色。但是，由于某种原因，即使我可以更改颜色，我也无法添加背景图像。它只是不会出现。除此之外，我似乎无法在我放置在此概览 div 中的任何 div 上添加背景图像。

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

如果您单击菜单，您将看到黑色覆盖 div。我希望能够转到我的 menustyle.css 工作表，然后在 .overlay 中添加：

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

但这似乎没有任何作用！我不知道我要去哪里错了，所以我想知道是否有人可以帮助我。

谢谢！

编辑

感谢您的回答，我已尝试按照建议的方式放置 ../，正如您现在可以在网站上的 menustyle.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 放置在固定位置。