为什么在巨型机（引导程序）中没有显示背景图像？
[英]Why isn't background image showing up in Jumbotron (Bootstrap)?
问题描述
不管我更改了文件夹和文件名多少次，确保它们是相对路径等，我似乎都无法在我的超大屏幕上出现我的背景图像。
我只是想让它显示在我的Jumbotron DIV中，但事实并非如此。
这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mock Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- LOGO -->
<div class="navbar-header">
<!-- BUTTON FOR MENU ITEMS AS IT SHRINKS -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Mock Website</a>
</div>
<!-- COLLAPSE MENU ITEMS -->
<div class="collapse navbar-collapse" id="mainNavBar">
<!-- MENU ITEMS -->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<!-- DROP DOWN MENU -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">PORTFOLIO <span class="caret"></span</a>
<ul class="dropdown-menu">
<li><a href="#">PHOTOS</a></li>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">MUSIC</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div> <!-- Container Fluid -->
</nav> <!-- Nav -->
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs »</a>
</p>
</div> <!-- CONTAINER -->
</div> <!-- JUMBOTRON -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这是我的CSS：
/* NAVBAR */
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
/* JUMBOTRON */
.jumbotron {
background-color: ;
background-image: url("/images/blue.jpg");
background-repeat: no-repeat;
background-size: cover;
color: #FFF;
}
.dropdown li {
text-align: right;
}
2 个解决方案
解决方案1
0 2016-03-19 08:13:40
将CSS从background-image更改并压缩为仅background以保持外观整洁。
例如background: url(/images/blue.jpg) cover no-repeat;
代码本身看起来很正常。 图像是否在同一目录中？ 也许查看这篇文章会有所帮助： 链接不返回目录吗？
解决方案2
0 2016-03-19 09:05:28
检查存储图像的文件夹的权限。 您的代码是正确的，请使用完善的外部图片网址来检查此工作提要：
/* NAVBAR */ .navbar { margin-bottom: 0px; border-radius: 0px; } /* JUMBOTRON */ .jumbotron { background-color: ; background-image: url("http://vignette2.wikia.nocookie.net/p__/images/0/0c/Superman%27s_classic_pose.png/revision/latest?cb=20131218234907&path-prefix=protagonist"); background-repeat: no-repeat; background-size: cover; color: #FFF; } .dropdown li { text-align: right; }
<!-- LOGO --> <div class="navbar-header"> <!-- BUTTON FOR MENU ITEMS AS IT SHRINKS --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Mock Website</a> </div> <!-- COLLAPSE MENU ITEMS --> <div class="collapse navbar-collapse" id="mainNavBar"> <!-- MENU ITEMS --> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <!-- DROP DOWN MENU --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">PORTFOLIO <span class="caret"></span</a> <ul class="dropdown-menu"> <li><a href="#">PHOTOS</a></li> <li><a href="#">VIDEOS</a></li> <li><a href="#">MUSIC</a></li> </ul> </li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> <!-- Container Fluid --> </nav> <!-- Nav --> <!-- Main component for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1>Navbar example</h1> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs »</a> </p> </div> <!-- CONTAINER --> </div> <!-- JUMBOTRON --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
为什么我的超大屏幕没有显示我的背景图像？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.