以下代码将加载被ul / li＆＃39>切断或覆盖的背景图片
这只发生在bootstrap中。我在jsfiddle上有它 没有引导程序：https://jsfiddle.net/kng2upm1/ 使用bootstrap：https://jsfiddle.net/kng2upm1/1/
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt"Logo"></a>
</div>
<div>
<ul class="nav navbar-nav">
<li> <a href="">Git Hub</a>
<li> <a href="">Game Vote Alpha</a>
<li> <a href="">Minecraft Server</a>
</ul>
</div>
</div>
</nav>
<h1>File Directories</h1>
<ul id="filelist">
<li> <a href="">TV Shows</a>
<li> <a href="">Movies</a>
<li> <a href="">Music</a>
<li> <a href="">Audio Books</a>
<li> <a href="">Games</a>
<li> <a href="">Pen and Paper RPG Scans</a>
</ul>
</body>
CSS
#filelist{
list-style-type: none;
}
html{
background-image: url("image");
background-repeat: no-repeat;
background-size: 500px auto;
background-attatchment: fixed;
background-position: right;
}
答案 0 :(得分：1)
Bootstrap向正文添加background-color: #fff，因为您要将图像应用于HTML元素，请尝试更改css以将图像放在body元素上。
答案 1 :(得分：0)
为body标签添加背景（内联css）
<body background="http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png">
Bootstrap可能会覆盖你的背景......
答案 2 :(得分：0)
你的引导容器都搞砸了。您只在其中一个嵌套元素中有背景。您应该将背景元素放入包含最大元素的最大元素中，以获得最佳效果。
HTML：
<ul class="nav navbar-nav">
<li> <a href="https://github.com/damphon">Git Hub</a>
<li> <a href="http://gn.jeremytoler.net">Game Vote Alpha</a>
<li> <a href="http://mc.jeremytoler.net">Minecraft Server</a>
</ul>
<h1>File Directories</h1>
<ul id="filelist">
<li> <a href="/TV">TV Shows</a>
<li> <a href="/Movies">Movies</a>
<li> <a href="/Music">Music</a>
<li> <a href="/AudioBooks">Audio Books</a>
<li> <a href="/Games">Games</a>
<li> <a href="/RPG">Pen and Paper RPG Scans</a>
<li> <a href="/EduVid">Programing Videos</a>
</ul>
</div>
</body>
CSS：
#filelist{
list-style-type: none;
}
html{
}
.container-fluid{
background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
background-repeat: no-repeat;
background-size: cover;
background-attatchment: fixed;
background-position: right;
}
答案 3 :(得分：0)
这是Bootstrap添加到您的body标记的内容。您可以使用以下方法覆盖它：
body{
background-color: initial;
}
确保您的CSS文件在引导程序之后引用。
html {
background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
background-repeat: no-repeat;
background-size: 500px auto;
background-attachment: fixed;
background-position: right;
}
body {
background-color: initial !important;
/* !important to force Code Snippet to use this value.*/
}
#filelist {
list-style-type: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo">
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li> <a href="https://github.com/damphon">Git Hub</a>
<li> <a href="http://gn.jeremytoler.net">Game Vote Alpha</a>
<li> <a href="http://mc.jeremytoler.net">Minecraft Server</a>
</ul>
</div>
</div>
</nav>
<h1>File Directories</h1>
<ul id="filelist">
<li> <a href="/TV">TV Shows</a>
<li> <a href="/Movies">Movies</a>
<li> <a href="/Music">Music</a>
<li> <a href="/AudioBooks">Audio Books</a>
<li> <a href="/Games">Games</a>
<li> <a href="/RPG">Pen and Paper RPG Scans</a>
<li> <a href="/EduVid">Programing Videos</a>
</ul>
</body>
答案 4 :(得分：0)
HTML标签的样式... ....设置body标记的样式。
HTML标记永远不会为视觉更改设置样式。
仅仅更改CSS以应用于正文标记而不是HTML标记可以解决此问题。
（你的html中也有标记错误）