background-image不显示图像-但是<img tag="" is="" displaying="" image="" with="" same="" url="" path

Question

="" 我正在使用background-image：url（'image'）在HTML页面中包含一些图标。但是，显示空白并且图像不存在。我正在使用一个空标签。当我使用标签时，图像显示成功。你能告诉我我做错了什么吗？这是我的代码：

#adventureIcon {
  background-image: url("../icons/Kayak01.png");
  width: 50px;
  height: 50px;
  z-index: 1;
  color: red;
  background-repeat: no-repeat;
}

<li class="menuItem">
  <a class="icon_navigation" href="#adventure" id="adventure">
    <i class="iconNav" id="adventureIcon"> </i>
    <span class="icon_name">
          Adventure
    </span>
  </a>
</li>

Answer 1

如果您的路径正确，则可以向您的班级添加显示块，它将以正确的高度和宽度显示：

#adventureIcon {
  background: url("https://www.rei.com/content/dam/images/Expert%20Advice/Migration/HeroImages/Van_Dragt_092217_1030_kayaking_basics_lg.jpg");
  width: 50px;
  height: 50px;
  z-index: 1;
  color: red;
  background-repeat: no-repeat;
  display: block;
}

#adventureIcon2 {
  background: url("https://www.rei.com/content/dam/images/Expert%20Advice/Migration/HeroImages/Van_Dragt_092217_1030_kayaking_basics_lg.jpg");
  width: 50px;
  height: 50px;
  z-index: 1;
  color: red;
  background-repeat: no-repeat;
}

<li class="menuItem">
  <a class="icon_navigation" href="#adventure" id="adventure">
    <i class="iconNav" id="adventureIcon"></i>
    <div class="iconNav"></div>
    <span class="icon_name">        
                        Adventure
                        </span>
  </a>
</li>

<li class="menuItem">
  <a class="icon_navigation" href="#adventure" id="adventure2">
    <i class="iconNav" id="adventureIcon2"></i>
    <div class="iconNav"></div>
    <span class="icon_name">        
                        Adventure
                        </span>
  </a>
</li>