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

Question

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

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

如果单击菜单，您将看到黑色覆盖层 div。我希望能够转到我的 menustyle.css sheet 并在 .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

只需在下面的代码中使用 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 4

就像

回答的一样

When you do background-image:url(path) on a .css, path is relative to that file.

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

对其进行样式设置

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');

将从根

中查找目录/images/menu1/

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

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

Background color works, but image doesn't. Can't figure out why

html

css

jquery

background

image