如何使用boostrap用1张图像覆盖整个屏幕背景

index.html

<html>
<head>
<title>My Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="webpage.css">
</head>
<body>
<div class="jumbotron">
</div>
</body>
</html>

网页.css

.jumbotron{
  position:relative;
  background: #000 url(background.jpg) center center;
  width:100%;
  height:100%;
  background-size:cover;
  overflow:hidden;
}

当我使用以下代码时，在顶部和底部有一些空白，在空白的左上角有一个">"。请告诉我如何解决这个问题。这是我第一次使用bootstrap。非常感谢。

您在导航后有底部边距

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px; <----Here
    border: 1px solid transparent;
}

和到jumbotron选择器的边距

.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px; <---Here
    color: inherit;
    background-color: #EEE;
}

导致此问题，请将margin更改为0px;，更好地使用自定义选择器并用0px覆盖margin；

相关内容

最新更新

热门标签：