Question

我的index.html文件和img文件夹位于同一目录中，我想在div和.img1中加入背景图片。

所以我正在做这样的事情：

Index.html

.img1 {
  background-image: url("img/bg-header.jpg");
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<div class="img1">
  <div class="ptext">
    <div class="dark-overlay">
      <div class="home-inner text-center">
        <h2 class="display-4 text-center">PULSES</h2>
        <br>
        <p> HALUTZIM 26 TEL AVIV<br><br><a href="tel:+972-50-4410600">+4410600</a></p>
        <br>
        <br>
        <div class="arrow">
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
    </div>
  </div>

</div>

这应该设置div的背景图像，但是不起作用？

注意：

正如我提到的index.html style.css和img文件夹位于同一目录中一样，我在img文件夹中有图像。我做错什么了吗？

请帮助谢谢你

Answer 1

尝试使用标签将图像呈现为页面中的嵌入式图像，只是为了确认路径是否正确。如果路径正确，请检查div的宽度和高度，然后使用background-postion属性。

如果仍然无法正常工作，请发布您的html头。

Answer 2

我会尝试使用背景图片：url（“ ../ img / bg-header.jpg”）;

在下面的评论中，以韦恩的出色解释补充我的答案：

”来自CSS文件的相对路径基于其位置。因此，同一CSS文件可用于不同位置的HTML文件。css文件与html不在同一目录中。因此../或/img/bg-header.jpg，如果/ img /不在www根目录下。”

为什么背景图像属性不起作用？

2 个答案: