如何修复开发工具中 CSS 属性 的覆盖问题?

How can I fix the overriding of a CSS property, in the dev tools?

出于某种原因,当我 运行 我的代码时,我的所有背景图像元素都没有显示。它正在被覆盖,这通过在 inspect element > stlyes 输出中被划掉来显示。

如何在不使用 !important 标签的情况下摆脱这种覆盖? 我所需要的只是让我的图像出现!我可能遗漏了一些显而易见的东西。

body {
  background-image: "images/bg.png";
}
#headNav {
  top: 0;
  background-image: "images/header.png";
  height: 70px;
  display: block;
}
#dash {
  background-image: "images/dash.png";
  height: 800px;
  width: 600px;
  display: block;
}
#testCanvas {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
}
#snowFlakeSliders {
  position: relative;
  margin: 0 auto;
  top: 450px;
  margin-left: 300px;
}
input {
  margin: 10px;
}
#attribute {
  margin-right: 10px;
}
<!DOCTYPE HTML>
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Canvas Test Using Double Buffering</title>
  <link type="text/css" rel="stylesheet" href="slider4.css">


</head>

<body onload="init()">
  <div id="headNav"></div>

  <div id="dash">


    <canvas id="testCanvas" width="400" height="400">
      Canvas not supported
    </canvas>


    <div id="snowFlakeSliders">
      <p id="attribute">Speed</p> <span id="sliderStatus" class="sliderSpan">50</span>
      <input type="range" min="0" max="100" value="50" step="2" onchange="sliderChange(this.value)" />
      <br />
      <br />


      <p id="attribute">Width</p> <span id="sliderWidth" class="sliderSpan">5</span>
      <input type="range" min="0" max="10" value="5" step="1" onchange="sliderChangeWidth(this.value)" />
      <br />
      <br />


      <p id="attribute">Height</p> <span id="sliderHeight" class="sliderSpan">100</span>
      <input type="range" min="0" max="200" value="100" step="1" onchange="sliderChangeHeight(this.value)" />
      <br />
      <br />

    </div>
  </div>

</body>

<script src="slider4.js"></script>

</html>

尝试让你的背景图像值url("image_path_here.png")

示例:background-image: url("images/bg.png");

希望对您有所帮助!