Question

我已包含来自index.html的代码，并且style.css页面已正确链接，因为其他元素都正常工作。

.fullbox {
  border: 1px solid orange;
  background-image: url(background-image:url(/images/topmain.jpg) no-repeat;
}

<div class="row">
  <div class="col-12">
    <div class="fullbox">
      <h2>plumbing</h2>
    </div>
  </div>
</div>

Answer 1

您在这里误认为了CSS

background-image: url(background-image:url(/images/topmain.jpg) no-repeat;

应该是

background-image: url('images/topmain.jpg');
background-repeat: no-repeat;

OR

background: url(/images/topmain.jpg) no-repeat;

在代码段中更新

.fullbox {
  border: 1px solid orange;
  background-image: url('images/topmain.jpg');
  background-repeat: no-repeat;
}

<div class="row">
  <div class="col-12">
    <div class="fullbox">
      <h2>plumbing</h2>
    </div>
  </div>
</div>

另一个实时示例

.fullbox {
  border: 1px solid orange;
  background-image: url('https://cdn.dribbble.com/users/1928643/avatars/small/b3f1a5ea4d68ff539b8f808ff3c4b8a5.jpg');
  background-repeat: no-repeat;
}

<div class="row">
  <div class="col-12">
    <div class="fullbox">
      <h2>plumbing</h2>
    </div>
  </div>
</div>

要详细了解背景图片的属性和路径

https://www.w3schools.com/cssref/pr_background-image.asp

Answer 2

背景：url（/images/topmain.jpg）不重复； }

Answer 3

background: url(source/...) center center/cover no-repeat fixed; 1）您不能在background-image中使用no-repeat，而应使用JUST背景语法。例如 2）在url之后无需再次写入背景图片，您可以继续输入您的相对地址，例如background-image: url(source/...) 希望对您有帮助：）

使用CSS添加背景图片，无法正常工作？

3 个答案: