Question

帮我把图像放在背景中而不是背景色我尝试过Bootstrap＆＃34; img-responsive img-center＆＃34; html标签，但它不会出现在文本和CSS＆＃34; background-image：url（＆＃34;）;＆＃34;根本不工作

这是CSS：

＆＃13;

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
}

header .container {
    padding-top: 74px;
    padding-bottom: 263px;
}

header .intro {
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    text-transform: uppercase;
     font-weight: 900;
     letter-spacing: 1px;  
}

header .subintro {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 500;
}

Here is HTML

＆＃13;

<header>
	<div class="container"> 
		<div class="row">
			<div class="col-lg-12">
				<div class="intro-text">
					<span class="intro" id="mainIntro">We will lead the way</span></br>
					<span class="subintro" id="secondIntro">We provide not better but best in the world</span></br>
					<button type="button" class="btn btn-default" id="introBtn">START YOUR JOURNEY</button>
				</div>
				</div>
			</div>
		</div>
	</div>
</header>

＆＃13;

Answer 1

在background-image: url()设置

之后，将background-size: cover和background-color添加到标头的css声明中

（DEMO）

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
    background-image: url(http://www.lorempixel.com/1000/1000);
    background-size: cover;
}

Answer 2

这应该很简单

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
    background-image: url(http://lorempixel.com/output/abstract-q-g-640-480-8.jpg);
    /* or insert appropriate path to your image */
}

＆＃13;

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
    background-image: url(http://lorempixel.com/output/abstract-q-g-640-480-8.jpg);
    /* or insert appropriate path to your image */
}

header .container {
    padding-top: 74px;
    padding-bottom: 263px;
}

header .intro {
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    text-transform: uppercase;
     font-weight: 900;
     letter-spacing: 1px;  
}

header .subintro {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 500;
}

Here is HTML

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<header>
	<div class="container"> 
		<div class="row">
			<div class="col-lg-12">
				<div class="intro-text">
					<span class="intro" id="mainIntro">We will lead the way</span></br>
					<span class="subintro" id="secondIntro">We provide not better but best in the world</span></br>
					<button type="button" class="btn btn-default" id="introBtn">START YOUR JOURNEY</button>
				</div>
				</div>
			</div>
		</div>
	</div>
</header>

＆＃13;

我想在Bootstrap中的背景图像

2 个答案: