html - 使用 css 添加背景图片，不起作用？

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;

或

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