Question

我最近又开始进行网页设计，到目前为止一切都很好。但是现在我遇到了一些问题，由于某种原因，标题中的背景图像不会出现在jumbotron中。

我在这里寻找解决方案，因此尝试过，删除标题的高度，只使用background：而不是background-image并将url html切换到不同的图片和我的目录中的url，但没有成功。

body, html {
	padding:0;
	margin:0;
	
	
}
p, h3 {
	color:#A9BF00;
}
.header {
	width:100%;
	background-image:url (http://static.sgv2.com/img/12011/aspect/700x500/content/1/1112081830261591-pearlz_chalk_board.jpg);
	background-size:cover;
}
.header img {
	position:relative;
	left:-100px;
}

.nav a { 
	color:#A9BF00;
}

.jumbotron {
	background-image: url(https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash2/v/t1.0-9/1901796_253871248070239_1337858622_n.png?oh=958dde5dfd4ff94046092785f3d8d0f7&oe=5686AEA0&__gda__=1455632370_852f1972f7da55909fbcb6b95cdcea63);
	background-size:cover;
	width:100%;
	height:500px;
}

.supporting {
	text-align:center;
}
.col-md-4 {
	margin-left:7%;
	height:200px;
	width:300px;
}

.col-md-4 img {
	height:200px;
	width:300px;
}

.footer {
	background-color:gray;
	position:relative;
	top:230px;
	height:50px;
}

.footer h5 {
	color:#A9BF00;
	margin-top:15px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<link href="bootstrap.css" rel="stylesheet">
    	<link href="Style.css" type="text/css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>La Venezia</title>
    </head>
    <body>
    				<!--Header Section-->
    	<div class="header">
    		<div class="container">
    			<img src="lavenezia.png"/>
    		</div>
    	</div>
        			<!--Nav Section-->
        <div class="navigation">
        	<div class="container">
         		<ul class="nav nav-tabs pull-right">
        			<li class="active"> <a href="#">Home</a></li>
       				<li> <a href="#">Assortiment</a></li>
       				<li> <a href="#">Het Team</a></li>
       				<li> <a href="#">Contact</a></li>
       			</ul>
       		</div>
 		</div>   
 		    		<!--Big Picture Section-->
 		<div class="jumbotron">
 			
 		</div>
 					<!--Supporting Section-->
 		<div class="supporting">
 			<div class="row">
 				<div class="col-md-4">
 					<img class="img-responsive" src="http://www.bliqx.net/wp-content/uploads/2013/10/girls-eating-burger.jpg"/>
 					<h3>Eat</h3>
 					<p>Bij ons kunt u terecht voor verse friet, snacks, broodjes en salades. Of u nou alleen, met z'n tweeën of met een groter gezelschap bij ons komt eten, wij zorgen er voor dat u goed verzorgd wordt. Lekker eten en drinken in een gezellige sfeer met een vriendelijke en enthiousiaste bediening.</p>
 				</div>
 				<div class="col-md-4">
 					<img class="img-responsive"
 						src="http://worldsoccertalk.com/wp-content/uploads/2013/10/soccer-on-tv.jpg"/>
 					<h3>Relax</h3>
 					<p>Wilt u tijdens het genot van u frietje even lekker rustig een wedstrijd bekijken van uw favoriete team? Dan kan dat! Met ons fox-sport pakket bent u altijd voorzien van de juiste kanalen.</p>
 				</div>
 				<div class="col-md-4">
 					<img class="img-responsive"
 						src="http://cdn.listaka.com/wp-content/uploads/2015/06/03-friends-drinking-main.jpg"/>
 					<h3>Enjoy</h3>
 					<p>Omdat het leven te kort is om iets anders te zijn dan gelukkig</p>
 				</div>
 			</div>
 		</div>
        				<!--Footer Section-->
        		<div class="footer">
        			<div class="container">
        				<div class="col-md-2">
        					<h5>La Venezia</h5>
        				</div>
        				<div class="col-md-10 text-right">
        					<a href="#"><h5>Contact</h5></a>
        				</div>
        			</div>
        		</div>
        
        
    </body>
</html>

Answer 1

尝试更改此行：

.header {
    width:100%;
    background-image:url (http://static.sgv2.com/img/12011/aspect/700x500/content/1/1112081830261591-pearlz_chalk_board.jpg);
    background-size:cover;
}

到此：

.header {
    width:100%;
    background-image: url(http://static.sgv2.com/img/12011/aspect/700x500/content/1/1112081830261591-pearlz_chalk_board.jpg);
    background-size:cover;
}

不应该是url和（

之间的空格）

Answer 2

试试这个

.header {
    width: 100%;
    background-image: url('http://static.sgv2.com/img/12011/aspect/700x500/content/1/1112081830261591-pearlz_chalk_board.jpg');
    background-size: cover;
    height: 100px;
}

您需要根据需要更改高度

背景图像标题没有出现

2 个答案: