html - 不能将图像放在html和css中的文本后面

Question

你好1我正在处理一个 html 和 css 元素。我想为背景中有图像的文本创建一个框，如下图所示: 我得到的结果是这样的:

.background {
  background: url(background.png) repeat;
  border: 2px solid black;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.4;
  -webkit-filter: sepia(100%);
  /* Chrome, Safari, Opera */
  filter: sepia(100%);
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<div class="background">

  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

我的代码中有什么我应该更改的吗？我的图像 background.png 存在于我有 html 文件的文件夹中。谢谢!

Answer 1

当你在你的 css 文件中使用它时:

background: url(background.png) repeat;

这意味着图像与 css 文件位于同一文件夹中。

如果图像位于 css 文件上方的文件夹中，请使用此"

background: url('../background.png') repeat;

此外，如果您尝试使用 Linux 操作系统，请注意文件名的大小写

感谢@StephenP 提供完整的信息:

CSS 文件中的路径是相对于样式表的，而不是相对于文档的