SASS/CSS ~ 背景： URL(); 不管用

Question

我已经尝试了一切，这非常令人沮丧。 我无法使用 CSS 添加任何图像？？？ 我正在使用背景：url...在您说之前（需要链接到文件夹，使用/，使用./）。 我已经尝试了一切。 这没用。 我正在从 headfirst Javascript 做“战舰项目”。 我什至尝试从他们提供的已完成文件夹中复制此代码片段，但那里的代码也不起作用。 我正在使用 VS 代码。

//只是我为你剪掉的问题部分~ HTML

<div id="board">
      <!-- <img src="board.jpg" alt="" /> -->
      <div id="messageArea">hello world</div>
      <table>
        <tr>
          <td id="00"></td>
          <td id="01"></td>
          <td id="02"></td>
          <td id="03"></td>
          <td id="04"></td>
          <td id="05"></td>
          <td id="06"></td>
        </tr>
        <tr>
          <td id="10"></td>
          <td id="11"></td>
          <td id="12"></td>
          <td id="13"></td>
          <td id="14" class="hit"></td>
          <td id="15"></td>
          <td id="16"></td>
        </tr>

//SCSS，但是 CSS 链接到我的 html

$greenBG: rgb(83, 175, 19);
$formBgColor: rgb(152, 207, 113);
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

#board {
  position: relative;
  width: 1024px;
  height: 863px;
  margin: auto;
  background: url("board.jpg");
  #messageArea {
    position: absolute;
    top: 15px;
    left: 0;
    color: $greenBG;
    font-size: 2.5rem;
  }
}

您可以在https://www.wickedlysmart.com/hfjs/查看 Headfirst 提供的完整代码

其第 8 章文件夹

非常感谢大家

Answer 1

web 图像在这里像这样工作！

问题绝对出在您的文件方向上。

 #board{ background:url('https://i.stack.imgur.com/aQZM2.png'); }

 <div id="board"> <.-- <img src="board.jpg" alt="" /> --> <div id="messageArea">hello world</div> <table> <tr> <td id="00"></td> <td id="01"></td> <td id="02"></td> <td id="03"></td> <td id="04"></td> <td id="05"></td> <td id="06"></td> </tr> <tr> <td id="10"></td> <td id="11"></td> <td id="12"></td> <td id="13"></td> <td id="14" class="hit"></td> <td id="15"></td> <td id="16"></td> </tr> </table> </div>