无法将图像放在html和css中的文本后面

Question

Hello1 我正在使用html和css项目。我想创建一个文本框，其背景图像如下图所示：  我得到的结果是这样的：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="background">

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

＆＃13;

＆＃13;

＆＃13;

我的代码中是否应该更改某些内容？我的图像background.png存在于我拥有html文件的文件夹中。谢谢！

Answer 1

在css文件中使用它时：

background: url(background.png) repeat;

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

如果图像位于css文件的上方文件夹中，请使用此＆＃34;

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

此外，如果您正在尝试Linux操作系统，请关注文件名称的大/小写情况

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

CSS文件中的

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

Answer 2

如果您的文件结构如下所示：

index.html
css/style.css
img/background.png

你应该链接到这样的背景：url('../img/background.png') ＆＃34; ..＆＃34;将返回父文件夹

https://jsfiddle.net/cnLjf8e5/

Answer 3

主要问题可能是这个

  background: url(background.png) repeat;

系统无法找到此图片，请按此尝试

background-image: url("background.png") repeat;

请确保，此图片位于此位置