HTML元素不显示什么调试器说它应该

我正在建设使用Twitter引导网站，并希望将一个背景图像应用于<li>元素，当它在导航栏中处于活动状态时。我无法获得背景图像以进行测试，我尝试将其设置为随机背景颜色。我发现调试器说这个背景颜色（红色）应用于元素，但在实际页面上，它显然不是红色。 HTML元素不显示什么调试器说它应该

请注意，调试器显示的属性不显示在实际页面上。为什么<li>元素没有红色背景？

我只包括了相关的HTML

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>...</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> 
    <script src="http://connect.soundcloud.com/sdk/js"></script> 
    <script src="./js/global.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    <link rel="stylesheet" href="./styles/global.css"> 
    </head> 

<nav class="navbar navbar-inverse"> 

<div class="navbar-header"> 
       <a class="navbar-brand" href="./index.html">SMTHN</a> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 

<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;"> 
     <ul class="nav navbar-nav"> 
      <li class="active"> 
       <a href="./index.html">Home</a> 
      </li> 
      <li> 
       <a href="./index.html">Tracks</a> 
      </li> 
      <li> 
       <a href="./index.html">Merchandise</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="./index.html">Forums</a> 
      </li> 
      <li> 
       <a href="#" data-toggle="modal" data-target="#signInModal">Sign in</a> 
      </li> 
      <li> 
       <a href="#" data-toggle="modal" data-target="#signUpModal">Sign Up</a> 
      </li> 
     </ul> 
    </div> 
</nav>

CSS

.navbar-inverse { 
    background: rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 0 0 0.5px #9d9d9d; 
    -webkit-box-shadow: 0 0 0 0.5px #9d9d9d; 
    box-shadow: 0 0 0 0.5px #9d9d9d; 
} 

li.active { 
    background-color: red !important; 
    background-image: url('../Images/button_glow.png'); 
}

我缺少什么？

来源

2017-04-15 Gaboik1

我看到它的工作https://jsfiddle.net/9r39211z/ – Lucian

它似乎工作正常。不过，我建议您使用a而不是li的背景，因为悬停适用于a，并且如果您使用li的活动样式，悬停样式将覆盖它。

li.active > a { 
    background-color: red !important; 
    background-image: url('../Images/button_glow.png'); 
}

https://i.imgur.com/GJO6LSm.png说明这是一个回吐的风格，但你只为li.active所以引导的风格重写它提及的活性风格。

这里是JSFiddle

来源

2017-04-15 17:12:02 Lucian

我真正想要的图像应用到整个'li'，不只是'了'它正在为小标签尽可能的空间。也许我可以强迫'a'占据'li'中的所有空间？ – Gaboik1

你检查了小提琴吗？因为'a'已经被封锁了，所以它会占用整个'li'。 https://jsfiddle.net/9r39211z/2/检查这个小提琴我也应用了图像。 – Lucian

@ Gaboik1你可以给你的网站链接，以便我可以检查你错过了什么。这个你发布的最小代码应该可以正常工作。似乎还有其他错误 – Lucian

如果我正确地读你的截图，有也适用于立一个背景图像，这就是为什么你没有看到红色。

未显示图像的问题可能是路径问题，请记住该路径与您的CSS文件相关。

使用网络检查器，检查错误，你可能会找到浏览器期望找到图像的路径，这应该会对你有帮助。

好运

来源

2017-04-15 17:14:59

我删除了'background-image'属性，它仍然没有变红。我也确定我的图像文件的相对路径是正确的。难道这是由于bootstrap以某种方式覆盖了我的样式表，即使它在引导样式表和'i！mportant'子句之后被调用？ – Gaboik1

HTML元素不显示什么调试器说它应该

回答

相关问题