背景色有效，但图像无效。想不通为什么

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上执行背景图像：url(路径)时，路径是相对于该文件的。

使用/css/menu/中的文件menustlye.css(包含class overlay样式的文件)目录，如果您使用对其进行样式设置

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

它将在目录CCD_ 9中查找CCD_。如果您使用

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

它将向上移动1个目录到/css，并在目录/css/images/menu1中找到background1.jpg

这意味着你的目录是错误的，所以我更喜欢使用相对于根目录的目录，像这个一样使用/

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

它将从根中查找目录CCD_ 14

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放置在固定位置。