在浏览器中测试我的网站时，我的jumbotron（bg图像），图像不透明度和字幕div不能正确缩放。我试图让它全部响应而不显示任何空格。我已经为我刚刚提到的每个div设定了高度，也许这可能是原因。
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>The Portfolio of Jason Murray</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link id="orginal" href="css/default-theme.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<!--=========== HEADER SECTION ================-->
<header id="header">
<!-- BEGIN MENU -->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<a class="navbar-brand" href="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div><!-- END MENU -->
</header>
<!--=========== END HEADER SECTION ================-->
<!--=========== MAIN CONTENT SECTION ================-->
<div class="jumbotron">
<div class="container">
<div class="image_opacity"></div>
<div class="caption">
<h2>Front-End</h2>
<h2>Web Developer</h2>
<p>Hi, I'm Jason Murray and I have a passion for building simplistic websites.</p>
<a href="#" class="caption_btn">Recent Work</a>
</div>
</div>
</div>
<!--=========== END MAIN CONTENT SECTION ================-->
<!--=========== FOOTER SECTION================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_left">
<p>© 2015 <a href="index.html" target="_blank">Jason Murray Web Design</a>. All Rights Reserved</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_right">
<ul class="social_nav">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!--=========== END FOOTER SECTION================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS：
body,html{
overflow-x:hidden;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden !important;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: #2f2f2f;
}
a:focus{
outline: none;
text-decoration: none;
}
h1,h2{
font-family: 'Montserrat', sans-serif;
}
h3,h4,h5,h6{
font-family: 'Varela', sans-serif;
}
h2 {
color: #313338;
font-size: 72px;
font-weight: 700;
line-height: 57px;
margin: 0;
padding-bottom: 10px;
text-transform: uppercase;
}
img{
border:none;
}
/*--------------------*/
/* HEADER */
/*--------------------*/
#header{
float: left;
display: inline;
width: 100%;
position: relative;
}
/*--------.menu_area-------- */
.menu_area{
position: absolute;
left:0;
right: 0;
top: 0;
}
.navbar-default {
background-color: #000000;
border-color: transparent;
padding: 12px 0px;
}
.past-main {
background-color: rgba(0,0,0,0.8);
margin-top: 0px;
padding:6px 0px;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
#navbar{overflow-x: hidden;}
.navbar-brand {
color: #fff !important;
font-size: 20px;
font-weight: bolder;
font-family: 'Varela', sans-serif;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover{
text-transform: uppercase;
color: #2da2c8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color: #2da2c8;
}
.navbar-brand > span {
color: #2da2c8;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #2da2c8;
}
/*---------------------*/
/* MAIN CONTENT - HOME */
/*---------------------*/
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
margin-top: 75px;
height: 305px;
}
.image_opacity{
background: none repeat scroll 0 0 #242434;
margin-top: 75px;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 305px;
z-index: 9;
}
.caption {
margin-top: 17%;
padding: 5px 0;
position: relative;
text-align: center;
z-index: 999;
}
.caption > h2 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 12px;
margin: 0 auto 10px;
padding-bottom: 8px;
text-align: center;
text-transform: uppercase;
width: 90%;
}
.caption>p{
color: #ffffff;
font-size: 12px;
}
.caption_btn{
padding: 10px 15px;
border: 2px solid #fff;
color: #fff;
font-size: 12px;
display: inline-block;
text-transform: uppercase;
}
.caption_btn:hover,.caption_btn:focus{
border-color:#2da2c8;
color: #2da2c8;
text-decoration: none;
}
/*----------------------*/
/* MAIN CONTENT - ABOUT */
/*----------------------*/
#about {
display: inline;
float: left;
width: 100%;
padding: 80px 0px;
}
.about_area{
float: left;
display: inline;
margin-bottom: 140px;
width: 100%;
min-height: 200px;
}
.heading{
float: left;
display: inline;
width: 100%;
}
.heading h2 {
display: inline-block;
margin-bottom: 35px;
margin-top: 65px;
padding-bottom: 15px;
padding-right: 50px;
font-size: 40px;
line-height: 40px;
}
.heading p{
font-size: 16px;
line-height: 28px;
font-weight: 300;
}
.about_content{
float: left;
display: inline;
width: 100%;
padding: 50px 0px;
}
.about_featured{
float: left;
display: inline;
width: 100%;
}
.panel-group .panel {
border-radius: 0;
margin-bottom: 0px;
box-shadow: none;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.panel-default {
border-color: transparent;
}
.panel-default > .panel-heading {
background-color: transparent;
color: #333;
border: 0 none !important;
padding: 5px 15px;
}
.panel-title {
border-bottom: 1px solid #ccc;
color: #222;
font-family: 'Varela', sans-serif;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a {
display: block;
text-decoration: none;
padding-bottom: 10px;
}
.panel-default .in{
padding-left:10px;
margin-left: 20px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a span{
margin-right: 5px;
}
.panel-body {
border-top-color: transparent !important;
padding: 0px 15px;
margin: 10px 0px;
}
.about_slider{
float: left;
display: inline;
width: 100%;
height: 350px;
}
.single_iteam{
float: left;
display: inline;
width: 100%;
height:100%;
}
.single_iteam img {
max-width: 100%;
}
.about_slider .slick-dots li button:before {
content: "•";
font-size: 28px;
}
.about_slider .slick-dots li.slick-active button:before {
opacity: 0.75;
}
.skills_area{
background-color: #fff
float: left;
display: inline;
width: 100%;
min-height: 350px;
padding: 85px 0px;
position: relative;
}
.skills{
position: relative;
z-index: 999;
}
.heading h3 {
color: #000;
display: inline-block;
float: left;
font-size: 40px;
margin: 0 0 40px;
padding-bottom: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 40px;
}
div[data-dimension] {
float: none;
margin: 0 auto;
}
.circle-text{
color: #000;
}
.single_skill{
float: left;
display: block;
width: 100%;
text-align: center;
}
.single_skill > h4 {
color: #000000;
font-size: 20px;
font-weight: bold;
}
/*--------------------------*/
/* MAIN CONTENT - PORTFOLIO */
/*--------------------------*/
/*------------------------*/
/* MAIN CONTENT - CONTACT */
/*------------------------*/
/*--------------------*/
/* FOOTER */
/*--------------------*/
#footer{
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: #000;
}
.footer_left{
float: left;
display: inline;
width: 100%;
}
.footer_left > p {
font-size: 12px;
text-align: center;
color: #ffffff;
margin-bottom: 5px;
margin-top: 5px;
}
.footer_left > p a {
font-weight: bold;
}
.footer_right{
float: left;
display: inline;
width: 100%;
}
.social_nav{
text-align: center;
}
.social_nav li{
display: inline-block;
}
.social_nav li a {
border: 1px solid #fff;
color: #ffffff;
display: inline-block;
font-size: 18px;
height: 30px;
margin-left: 5px;
text-align: center;
width: 35px;
line-height: 28px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.social_nav li a:hover{
color: #2da2c8;
border-color: #2da2c8;
}
/*----------------------------------*/
/* RESPONSIVE STYLE - MEDIA QUERIES */
/*----------------------------------*/
/* Landscape phones and portrait tablets */
@media(min-width: 481px) and (max-width: 767px) {
.navbar-brand {color: #fff !important;font-size: 26px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 12px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 592px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 592px;opacity: 0.8;width: 100%;}
.caption {margin-top: 40%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 25px;font-weight: 700;line-height: 20px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 14px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 14px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 24px;}
#footer > .container > .row {margin-right: auto;}
.footer_left > p {font-size: 12px;text-align: center;}
.social_nav{text-align: center;}
}
/* Portrait tablets and small desktops */
@media(min-width: 768px) and (max-width: 991px) {
.navbar-brand {color: #fff !important;font-size: 30px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 13px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 816px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 816px;opacity: 0.8;width: 100%;}
.caption {margin-top: 28%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 45px;font-weight: 700;line-height: 56px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 18px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 13px;text-align: left;}
#footer .row {margin-left: -26px;}
.social_nav{text-align: right;margin-right: 12px;}
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
.navbar-brand {color: #fff !important;font-size: 33px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.container > .navbar-header {margin-left:8px;}
.navbar-default .navbar-nav > li > a {font-size: 14px;}
.navbar-right {margin-right:0px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 1024px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 1024px;opacity: 0.8;width: 100%;}
.caption {margin-top: 32%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 55px;font-weight: 700;line-height: 66px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 19px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 14px;text-align: left;}
.social_nav{text-align: right;margin-right: 18px;}
}
/* Large desktops and laptops */
@media(min-width: 1200px) {
.navbar-brand {color: #fff !important;font-size: 35px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 15px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 740px;}
.image_opacity {background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 740px;opacity: 0.8;width: 100%;}
.caption {margin-top: 10%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 65px;font-weight: 700;line-height: 76px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption > p {color: #ffffff;font-size: 20px;}
.caption_btn {padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 20px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
.footer_left > p {font-size: 15px;text-align: left;}
.social_nav{text-align: right;}
}