0
這是我的代碼:背景設置爲滾動圖像的末尾,然後設置爲固定
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 {
\t color: #e29532;
\t margin: 0;
\t padding: 20px;
\t font-family:verdana;
\t font-size: 60px;
\t line-height: 50px;
\t letter-spacing: -2px;
\t font-weight: bold;
\t text-align:center;
}
h2 {
\t font-size:20px;
\t font-family:verdana;
\t color:#e29532;
}
p {
\t font-family:verdana;
}
b {
\t 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*/
\t
\t #contentcolumn{
\t margin-right: 0; /*Set margin to LeftColumnWidth*/
\t }
}
@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
\t
\t
\t #contentcolumn{
\t margin-left: 0;
\t }
}
label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-family:verdana
}
fieldset {
\t border-radius:4px;
\t background: rgba(0,0,0,0.6);
\t font-family:verdanda;
\t color:white;
}
legend {
\t
}
input {
\t border-radius:4px;
} \t
select {
\t border-radius:4px;
}
textarea {
\t opacity:0.8;
\t border-radius:4 \t px;
\t font-family:verdana;
}
table {
\t font-family:verdana;
}
<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Vinn en Bil!</title>
\t \t <link rel="shortcut icon" href="volvo.ico"></link>
\t \t <link rel="stylesheet" type="text/css" href="form.css">
\t \t <meta charset="UFT-8">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t </head>
\t <body>
\t \t <div id="maincontainer">
\t \t \t \t <div id="topsection">
\t \t \t \t \t <div class="innertube">
\t \t \t \t \t
\t \t \t \t \t \t <h1> Vinn en bil </h1>
\t \t \t \t \t \t <hr>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t <div id="contentwrapper">
\t \t \t \t <div id="contentcolumn">
\t \t \t \t \t <div class="innertube"> \t
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <form>
\t \t \t \t \t \t \t <fieldset class="fieldset"> \t
\t \t \t \t \t \t \t \t <legend></legend>
\t \t \t \t \t \t \t \t <h2>Personlig Information</h2>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="namn">Förnamn:</label>
\t \t \t \t \t \t \t \t \t <input type="text" placeholder="Förnamn" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Förnamn'" required />
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="efternamn">Efternamn:</label>
\t \t \t \t \t \t \t \t \t <input type="text" placeholder="Efternamn" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Efternamn'" required />
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="age">Ålder: </label>
\t \t \t \t \t \t \t \t \t <select name="age">
\t \t \t \t \t \t \t \t \t \t <option value="18-25">18-25</option>
\t \t \t \t \t \t \t \t \t \t <option value="25-35">25-35</option>
\t \t \t \t \t \t \t \t \t \t <option value="35-50">35-50</option>
\t \t \t \t \t \t \t \t \t \t <option value="50+">50+</option>
\t \t \t \t \t \t \t \t \t </select>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="kön">Kön:</label>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <table>
\t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t <td>Man</td>
\t \t \t \t \t \t \t \t \t \t \t <td><input class="radio" type="radio"></input></td>
\t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t <td>Kvinna</td>
\t \t \t \t \t \t \t \t \t \t \t <td><input class="radio" type="radio"></input></td>
\t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t <td>Annat</td>
\t \t \t \t \t \t \t \t \t \t \t <td><input class="radio" type="radio"></input></td>
\t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="mail">Email:</label>
\t \t \t \t \t \t \t \t \t <input type="email" placeholder="Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email'" required/>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="adress">Adress:</label>
\t \t \t \t \t \t \t \t \t <input type="text" placeholder="Adress" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Adress'"/>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="postnummer">Postnummer:</label>
\t \t \t \t \t \t \t \t \t <input type="text" placeholder="Postnummer" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Postnummer'"/>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="postort">Postort:</label>
\t \t \t \t \t \t \t \t \t <input type="text" placeholder="Postort" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Postort'"/>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <label for="nummer">Telefon nummer:</label>
\t \t \t \t \t \t \t \t \t <input type="text" placeholder="Telefon nummer" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Telefon nummer'"/>
\t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t </fieldset>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <fieldset class="fieldset">
\t \t \t \t \t \t \t \t <legend></legend>
\t \t \t \t \t \t \t \t <h2>Om du vann?</h2>
\t \t \t \t \t \t \t \t \t <table>
\t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t <td>Välj en bil</td>
\t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t \t \t \t \t <select name="make" id="make">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="">Välj en Volvo typ</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="XC">XC</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V">V</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="S">S</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="Laddhybrider">Laddhybrider</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t </select> \t \t
\t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t \t \t \t \t <div class="from-group">
\t \t \t \t \t \t \t \t \t \t \t \t \t <select name="type" id="type">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="" class="">Välj en Volvo model </option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="XC90" class="XC">XC90</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="XC60" class="XC">XC60</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V60 Cross country" class="V">V90 Cross country</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V90" class="V">V90</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V60 Cross country" class="V">V60 Cross country</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V60" class="V">V60</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V40 Cross country" class="V">V40 Cross country</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V40" class="V">V40</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="S90" class="S">S90</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="S60 Cross country" class="S">S60 Cross country</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="S60" class="S">S60</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="XC90 T8 Twin engine" class="Laddhybrider">XC90 T8 Twin engine</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V60 D6 Twin engine" class="Laddhybrider">V60 D6 Twin engine</option>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="V60 D5 Twin engine" class="Laddhybrider">V60 D5 Twin engine</option> \t \t
\t \t \t \t \t \t \t \t \t \t \t \t \t </select>
\t \t \t \t \t \t \t \t \t \t \t \t </div> \t \t
\t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t </tr> \t
\t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <p>Varför ska just du ska vinna:</p>
\t \t \t \t \t \t \t \t \t <textarea rows="20" cols="60"></textarea> \t
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </fieldset>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <fieldset class="fieldset">
\t \t \t \t \t \t \t \t <legend></legend>
\t \t \t \t \t \t \t \t <h2>Omdöme på hemsidan</h2> \t
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <p>Vad tycker du om sidan</p>
\t \t \t \t \t \t \t \t \t <textarea rows="20" cols="60"></textarea>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <input type="submit" value="Klar" onclick="alert('Tack för ditt deltagande!')">
\t \t \t \t \t \t \t \t \t <input type="reset">
\t \t \t \t \t \t </form>
\t \t \t \t \t </div> \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div id="footer"><a href="http://www.volvocars.com/se?gclid=Cj0KEQjwqMHABRDVl6_hqKGDyNIBEiQAN-O9hMtUPMIE4aak0QmcGyXpDihhM-HkAJVCuGxwqf7fpQUaAmVb8P8HAQ" target="_blank">Volvo</a></div>
\t \t </div>
\t </body>
</html>
我的背景附件設置成固定的,我想在網站上向下滾動然後結束圖像,然後設置爲固定。
我是新來編碼,這個網站是本地的,只是在我的coumputer,所以把鏈接圖像的背景圖像的url。
你說的是視差? –
請將代碼放入代碼片段的相關部分,以便它運行,然後單擊「整齊」 – mplungjan