背景设置为滚动到图像的结尾，然后设置为固定

时间：2016-11-09 20:38:33

标签： html css

这是我的代码：

＆＃13;
＆＃13; 
ProgressDialog
＆＃13; 
body{
margin:0;
padding:0;
line-height: 1.5em;
background-image: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); 
background-repeat:no-repeat;
background-attachment: fixed;


h1 {
	color: #e29532;
	margin: 0;
	padding: 20px;
	font-family:verdana;
	font-size: 60px;
	line-height: 50px;
	letter-spacing: -2px;
	font-weight: bold;
	text-align:center;
}

h2 {
	font-size:20px;
	font-family:verdana;
	color:#e29532;
}

p {
	font-family:verdana;
}

b  {
	font-size: 110%;
}

#topsection{
background: #dddce1;
height: 100px; /*Height of top section*/
margin:0;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

}


#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}

#footer a{
color: white;
}

.innertube{
margin:0;
}
@media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/


	
	#contentcolumn{
	margin-right: 0; /*Set margin to LeftColumnWidth*/
	}
}

@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
	
	
	#contentcolumn{
	margin-left: 0;
	}
}

label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-family:verdana
 }

fieldset {
	border-radius:4px;
	background: rgba(0,0,0,0.6);
	font-family:verdanda;
	color:white;
}

legend {
	
}

input {
	border-radius:4px;
}	

select {
	border-radius:4px;
}

textarea {
	opacity:0.8;
	border-radius:4	px;
	font-family:verdana;
}

table {
	font-family:verdana;
}
＆＃13;
＆＃13;
＆＃13;

我的背景附件设置为固定，我希望网站向下滚动到图像的结尾，然后设置为固定。

我是编码的新手，这个网站是本地的，只是在我的coumputer上，所以把链接到url中的图像为background-image。

2 个答案:

答案 0 :(得分：0)

查看这个很棒的教程css-tricks.com/scroll-fix-content

答案 1 :(得分：0)

用背景图片替换css属性背景。添加背景大小和背景位置

＆＃13;
＆＃13; 
body{
margin:0;
padding:0;
line-height: 1.5em;
background: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); 
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment: fixed;
 


h1 {
	color: #e29532;
	margin: 0;
	padding: 20px;
	font-family:verdana;
	font-size: 60px;
	line-height: 50px;
	letter-spacing: -2px;
	font-weight: bold;
	text-align:center;
}

h2 {
	font-size:20px;
	font-family:verdana;
	color:#e29532;
}

p {
	font-family:verdana;
}

b  {
	font-size: 110%;
}

#topsection{
background: #dddce1;
height: 100px; /*Height of top section*/
margin:0;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

}


#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}

#footer a{
color: white;
}

.innertube{
margin:0;
}
@media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/


	
	#contentcolumn{
	margin-right: 0; /*Set margin to LeftColumnWidth*/
	}
}

@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
	
	
	#contentcolumn{
	margin-left: 0;
	}
}

label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-family:verdana
 }

fieldset {
	border-radius:4px;
	background: rgba(0,0,0,0.6);
	font-family:verdanda;
	color:white;
}

legend {
	
}

input {
	border-radius:4px;
}	

select {
	border-radius:4px;
}

textarea {
	opacity:0.8;
	border-radius:4	px;
	font-family:verdana;
}

table {
	font-family:verdana;
}
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<title>Vinn en Bil!</title>
		<link rel="shortcut icon" href="volvo.ico"></link>
		<link rel="stylesheet" type="text/css" href="form.css">
		<meta charset="UFT-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>

	<body>
		<div id="maincontainer">
				<div id="topsection">
					<div class="innertube">
					
						<h1> Vinn en bil </h1>
						<hr>
						

					</div>
				</div>

			<div id="contentwrapper">
				<div id="contentcolumn">
					<div class="innertube">	
						<br>
						<form>
							<fieldset class="fieldset">	
								<legend></legend>
								<h2>Personlig Information</h2>
								
									<br>
									
									<label for="namn">Förnamn:</label>
									<input type="text" placeholder="Förnamn" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Förnamn'" required />
									
									<br>
									<br>
									
									<label for="efternamn">Efternamn:</label>
									<input type="text" placeholder="Efternamn" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Efternamn'" required />
									
									<br>
									<br>
									
									<label for="age">Ålder: </label>
									<select name="age">
										<option value="18-25">18-25</option>
										<option value="25-35">25-35</option>
										<option value="35-50">35-50</option>
										<option value="50+">50+</option>
									</select>
									
									<br>
									<br>
									
									<label for="kön">Kön:</label>
									
									<table>
										<tr>
											<td>Man</td>
											<td><input class="radio" type="radio"></input></td>
										</tr>
										<tr>
											<td>Kvinna</td>
											<td><input class="radio" type="radio"></input></td>
										</tr>
										<tr>
											<td>Annat</td>
											<td><input class="radio" type="radio"></input></td>
										</tr>
									</table>
									
									<br>
									
									<label for="mail">Email:</label>
									<input type="email" placeholder="Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email'" required/>
									
									<br>
									<br>
									
									<label for="adress">Adress:</label>
									<input type="text" placeholder="Adress" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Adress'"/>
									
									<br>
									<br>
									
									<label for="postnummer">Postnummer:</label>
									<input type="text" placeholder="Postnummer" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Postnummer'"/>
									
									<br>
									<br>
									
									<label for="postort">Postort:</label>
									<input type="text" placeholder="Postort" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Postort'"/>
									
									<br>
									<br>
									
									<label for="nummer">Telefon nummer:</label>
									<input type="text" placeholder="Telefon nummer" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Telefon nummer'"/>
								<br>
							</fieldset>
							
							<br>
							<br>
							
							
							<fieldset class="fieldset">
								<legend></legend>
								<h2>Om du vann?</h2>
									<table>
										<tr>
											<td>Välj en bil</td>
											
											<td>
												<div class="form-group">
													<select name="make" id="make">
														<option value="">Välj en Volvo typ</option>
														<option value="XC">XC</option>
														<option value="V">V</option>
														<option value="S">S</option>
														<option value="Laddhybrider">Laddhybrider</option>
													</select>		
												</div>
											</td>
											
											<td>
												<div class="from-group">
													<select name="type" id="type">
														<option value="" class="">Välj en Volvo model </option>
														<option value="XC90" class="XC">XC90</option>
														<option value="XC60" class="XC">XC60</option>
														<option value="V60 Cross country" class="V">V90 Cross country</option>
														<option value="V90" class="V">V90</option>
														<option value="V60 Cross country" class="V">V60 Cross country</option>
														<option value="V60" class="V">V60</option>
														<option value="V40 Cross country" class="V">V40 Cross country</option>
														<option value="V40" class="V">V40</option>
														<option value="S90" class="S">S90</option>
														<option value="S60 Cross country" class="S">S60 Cross country</option>
														<option value="S60" class="S">S60</option>
														<option value="XC90 T8 Twin engine" class="Laddhybrider">XC90 T8 Twin engine</option>
														<option value="V60 D6 Twin engine" class="Laddhybrider">V60 D6 Twin engine</option>
														<option value="V60 D5 Twin engine" class="Laddhybrider">V60 D5 Twin engine</option>		
													</select>
												</div>		
											</td>
										</tr>	
									</table>

									<br>
									
									<p>Varför ska just du ska vinna:</p>
									<textarea rows="20" cols="60"></textarea>	
									
								<br>
								<br>
								
							</fieldset>
							
							<br>
							<br>
							
							<fieldset class="fieldset">
								<legend></legend>
								<h2>Omdöme på hemsidan</h2>	
									
									<br>
									
									<p>Vad tycker du om sidan</p>
									<textarea rows="20" cols="60"></textarea>
									
									
									
									
									
									<input type="submit" value="Klar" onclick="alert('Tack för ditt deltagande!')">
									<input type="reset">
						</form>
					</div>		
				</div>
			</div>


			<div id="footer"><a href="http://www.volvocars.com/se?gclid=Cj0KEQjwqMHABRDVl6_hqKGDyNIBEiQAN-O9hMtUPMIE4aak0QmcGyXpDihhM-HkAJVCuGxwqf7fpQUaAmVb8P8HAQ" target="_blank">Volvo</a></div>

		</div>

	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题