为什么我不能设置背景图像？

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

问候，

约翰内斯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"); 

}

来源

2015-11-05 Johannes Getzner

是你的背景图片的路径是否正确？ – j08691

为你的'#test {background-image：url（“background2.jpg”）;'增加图片的高度ident高度 –

通常div没有内容没有大小，图片可能会显示，但div中没有空格看见了。尝试设置宽度/高度。 –

选择风格链接的head

订单

来源

2015-11-05 19:44:04 Alex

谢谢你的工作，但为什么这很重要？ –

最后的风格有更多的优先权，因此引导超过了你的风格。请接受我的回答，如果它有帮助。 – Alex

@alirezasafian等等，bootstrap css是否包含#test的规则？ –

你的CSS看起来好像可能没问题，但看起来你并没有在那个空的div上设置高度或宽度。可能你会得到一个0像素×0像素的空白div，其背景为

来源

2015-11-05 19:47:17 wesww

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

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

#test { 
    background-image: url("background2.jpg"); 
    height: 100px; /* or whatever */ 
}

（或者，把东西在div，如文本什么的。）

来源

2015-11-05 19:48:02

为什么我不能设置背景图像？

回答

相关问题