Question

我刚刚开始编码，我正在构建一个带有bootstrap的网站。我想用背景图像创建一个简单的Container（id =“test”）。我不知道为什么，但我只是没有设置背景图像，我没有想法。我也在使用外部CSS。我刚发现折叠按钮不起作用。请帮我解决这两个问题。

问候，

Johannes Getzner

HTML：

<!DOCTYPE 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">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">   </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>FirstWebsite</title>

</head>

<body>
<div id="wrapper">
    <div class="navbar navbar-default">
        <div id="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="brand" class="navbar-brand">Example</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul id="listleft" class="nav navbar-nav navbar-left">
                    <li><a href="#Home">Home</a></li>
                    <li><a href="#About">About</a></li>
                </ul>
                <ul id="listright" class="nav navbar-nav navbar-right">
                    <li><a href="#Contact">Contact</a></li>
                    <li><a href="#Blog">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="test">

    </div>
</div>
</body>
</html>

CSS

#brand{
font-size: 300%;
}
.navbar-brand{
position:absolute; 
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 20%;
}
#listright{
margin-right: 20%;
}

ul li{
font-size: 100%;
}

#test{background-image: url("background2.jpg");

 }

Answer 1

你的css看起来可能没问题，但看起来你并没有在那个空div上设置高度或宽度。可能你会得到一张带有图像背景的0px xpp空div

Answer 2

id =“test”的div没有任何内容;因此它没有高度。所以无论你给出什么样的背景都不会出现。

解决方案：在css中给div一个高度。

Func<dynamic>

（或者在div中添加一些东西，比如文本或其他东西。）

Answer 3

更改head

中样式链接的顺序

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">   </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>

为什么我不能设置backgroundimage？

3 个答案: