Question

无论我多少次更改我的文件夹和文件名，确保它们是相对路径等，我似乎无法将我的背景图像显示在我的Jumbotron中。

我只是希望它出现在我的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 &raquo;</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;
}

Answer 1

将您的CSS从background-image更改并缩小为background，以保持良好和干净。

e.g。 background: url(/images/blue.jpg) cover no-repeat;

代码本身看起来很实用。图像是否在同一目录中？也许查看这篇文章会有所帮助：Links not going back a directory?

Answer 2

检查存储图像的文件夹的权限。你的代码是正确的，检查这个工作小提琴外部图像网址是否完美：

var something = ...

/* 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;
}

为什么不在Jumbotron（Bootstrap）中显示背景图像？

2 个答案: