我一直在尝试向jumbotron添加背景图像,但图像没有出现。
我完全从这个链接中获取了代码:http://www.bootply.com/103783
我复制粘贴HTML,CSS和java我只改变了图像路径。我已尝试过许多其他代码用于图像作为jumbotron的背景。没有工作我的意思是没有图像出现。图像出现一次使用我提到的代码,但它不在jumbotron后面,它出现在它旁边或只是在页面的某个地方。感谢您的帮助:(
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="bg"></div>
<div class="jumbotron">
<h1>Bootstrap Jumbotron</h1>
<p class="lead">+ Parallax Effect using jQuery</p>
</div>
</head>
</body>
</html>
CSS:
.bg {
background: url('2.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 350px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
height: 350px;
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
}
JS:
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
答案 0 :(得分:0)
假设您的css中的图片路径正确,问题是您的标记位于<head>
标记内。此标记中的任何内容都不会呈现为页面。
您的标记结构应为:
<html>
<head>
<!----- head stuff ----->
</head>
<body>
<!--- for semantic reasons you could wrap your jumbotron in a <header></header> tag --->
<div class="bg"></div>
<div class="jumbotron">
<h1>Bootstrap Jumbotron</h1>
<p class="lead">+ Parallax Effect using jQuery</p>
</div>
</body>
</html>