Question

我将图像放在正确的文件夹中，但我想在图像上添加一个文本框，我被告知最好的方法是将图像作为背景图像，但是当我按照教程进行操作时出现？无论如何这里是我的HTML

<div class="module">
                    <h2>blah blah</h2>
                            </div>

和我的CSS

    .module {
  margin: 10px;
  width: 1530px;
  height: 717px;
  display:block;
  background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
  background-size: cover;
  position: relative;
}

h2 {
  position: absolute;
  bottom: 100px;
  left: 100px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  color: white;
  margin: 0;
  font: 14px PTSans;
}

图像是屏幕的全宽，所以我在引导程序中使用容器流体，文本框将位于图像的中间。

Answer 1

您可以将本地文件称为背景，如下所示：

background: url("file://PATH-TO/file.jpg");

请记住括号内的字符串应该为文件提供URL。

此外，您可以选择在其中添加path。

background: url("PATH-TO/file.jpg");

Answer 2

更改反冲。从这......

background: url('C:\Users\Jason\Desktop\champions\images\shop.png');

到此

 background: url('C:/Users/Jason/Desktop/champions/images/shop.png');

干杯。

Answer 3

看起来你的CSS很好。尝试使用firefox或chrome调试器来检查是否可以加载背景图像。尝试更改背景大小的值。有时背景图像太大，您只能在屏幕上看到它的一部分（可能是完全白色）。

Answer 4

你的道路是错的试试这个：url('images/shop.png') - 如果你的CSS在冠军中

背景图片没有显示在我的页面上

4 个答案: