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）时，路径是相对于该文件的。

使用您的文件menustlye.css（包含class overlay样式的文件）目录/css/menu/，如果您使用

进行样式设置

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

它将查找目录background1.jpg中的/css/menu/images/menu1。如果您正在使用

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

它会将1个目录移至/css并找到目录background1.jpg中的/css/images/menu1

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

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

将从根

中查找目录/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
}

希望它会奏效。另外，你必须使用不透明度将图像和叠加在固定位置。

背景颜色有效，但图像没有。无法弄清楚为什么

5 个答案: