我不知道代码有什么问题，还在学习。你能帮忙吗？ https://jsfiddle.net/visualcurse/ugkamshy/3/
<html>
<head>
<title>Nature's Gift</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Ljubisa Naumovic">
<meta name="description" content="Priroda">
<meta name="keywords" content="web,html,html5,css,development,website,priroda,nature">
<link rel="icon" href="https://i.imgur.com/Lmd56ST.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="css/stilovi.css">
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon|Montserrat:100,400,700" rel="stylesheet">
</head>
<body>
<!-- header -->
<div class="header">
<div class="header-pozadina">
<!-- navigacija -->
<nav class="navigacija">
<a href="#">Pocetna</a><a href="#">O Nama</a><a href="#">Kontakt</a>
</nav>
<!-- navigacija kraj -->
<!-- Naslov strane -->
<div class="header-naslov">
<h1>Nature's Gift</h1>
</div>
<div class="vidijos">
<a href="#jump">GO!</a>
</div>
<div id="jump"></div>
</div>
</div>
<!-- header kraj -->
<!-- glavni sadrzaj-->
<section id="glavni">
<div class="sezone">
<h2 class="podnaslov1">Seasons</h2>
<p class="opis"><em><strong>A</strong> season is a division of the year marked by changes in weather, ecology, and amount of daylight. Seasons result from Earth's orbit around the Sun and Earth's axial tilt relative to the ecliptic plane. In temperate and polar regions, the seasons are marked by changes in the intensity of sunlight that reaches the Earth's surface, variations of which may cause animals to undergo hibernation or to migrate, and plants to be dormant.</em></p>
</div>
<!-- tema godisnja doba kraj -->
<!-- tema prolece -->
<div class="prolece">
<!-- glerija prolece -->
<div class="galerija">
<img src="https://i.imgur.com/C7nXNV7.jpg" alt="Slika 1" width="350" height="200">
</div>
<!-- glerija prolece kraj-->
<h3 class="podnaslov2">Spring</h3>
<p class="opis"><em><strong>S</strong>pring is one of the four conventional temperate seasons, following winter and preceding summer. There are various technical definitions of spring, but local usage of the term varies according to local climate, cultures and customs. When it is spring in the Northern Hemisphere, it is autumn in the Southern Hemisphere and vice versa. At the spring, or vernal, equinox, days are approximately 12 hours long with day length increasing as the season progresses.</em></p>
</div>
<!-- tema prolece kraj -->
<!-- tema leto -->
<div class="leto">
<!-- glerija leto -->
<div class="galerija">
<img src="https://i.imgur.com/GfWad5p.jpg" alt="Slika 1" width="350" height="200">
</div>
<!-- galerija leto kraj -->
<h3 class="podnaslov2">Summer</h3>
<p class="opis"><em><strong>S</strong>ummer is the hottest of the four temperate seasons, falling after spring and before autumn. At the summer solstice, the days are longest and the nights are shortest, with day-length decreasing as the season progresses after the solstice. The date of the beginning of summer varies according to climate, tradition and culture. When it is summer in the Northern Hemisphere, it is winter in the Southern Hemisphere, and vice-versa.</em></p>
</div>
<!-- tema leto kraj -->
<!-- tema jesen -->
<div class="jesen">
<!-- glerija jesen -->
<div class="galerija">
<img src="https://i.imgur.com/vGAUzNA.jpg" alt="Slika 1" width="350" height="200">
</div>
<!-- galerija jesen kraj -->
<h3 class="podnaslov2">Autumn</h3>
<p class="opis"><em><strong>A</strong>utumn, also known as fall in American and Canadian English,[1] is one of the four temperate seasons. Autumn marks the transition from summer to winter, in September (Northern Hemisphere) or March (Southern Hemisphere), when the duration of daylight becomes noticeably shorter and the temperature cools down considerably. One of its main features is the shedding of leaves from deciduous trees.</em></p>
</div>
<!-- tema jesen kraj -->
<!-- tema zima -->
<div class="zima">
<!-- glerija zima -->
<div class="galerija">
<img src="https://i.imgur.com/RtBMybC.jpg" alt="Slika 4" width="350" height="200">
</div>
<!-- galerija zima kraj -->
<h3 class="podnaslov2">Winter</h3>
<p class="opis"><em><strong>W</strong>inter is the coldest season of the year in polar and temperate zones (winter does not occur in the tropical zone). It occurs after autumn and before spring in each year. Winter is caused by the axis of the Earth in that hemisphere being oriented away from the Sun. Different cultures define different dates as the start of winter, and some use a definition based on weather. When it is winter in the Northern Hemisphere, it is summer in the Southern Hemisphere, and vice versa. In many regions, winter is associated with snow and freezing temperatures.</em></p>
</div>
<!-- tema zima kraj -->
</section>
<!-- glavni kraj -->
<footer class="footer">
<p>©2018 VisC designs, ALL RIGHTS RESERVED.</p>
</footer>
</body>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet');
* {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
body {
background: #000;
background: url("https://i.imgur.com/UC8QUwl.jpg") fixed no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
}
p, h1, h2, h3, h4, h5, h6 {
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
a, h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}
.header {
border-bottom: 2px solid rgba(0, 0, 0, .8);
height: 100%;
background: url("https://i.imgur.com/TYBIAVx.jpg") no-repeat fixed center;
background-size: cover;
}
.header-pozadina {
background: rgba(0,0,0, .5);
text-align: center;
height: 100%;
width: 100%;
}
.navigacija {
background: #333;
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 100;
text-align: center;
line-height: 30px;
border-bottom: 1px solid rgba(255,255,255, .1)
}
.navigacija a {
margin-right: -1px;
display: inline-block;
color: white;
font-size 18px;
padding: 10px 15px;
border-left: 1px solid rgba(255,255,255, .1);
}
.navigacija a:last-of-type {
border-right: 1px solid rgba(255,255,255, .1);
margin-right: 0px;
}
.navigacija a:hover {
color: #ddd;
background-color: rgba(0, 85, 5, 0.6);
}
.header-naslov {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-naslov h1 {
color: white;
font-size: 4em;
text-transform: uppercase;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
.vidijos {
padding: 10px;
bottom: 10%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.vidijos a {
color: white;
display: inline-block;
font-size: 20px;
border: 2px solid #fff;
border-radius: 50%;
padding: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 35px;
width: 35px;
}
.vidijos a:hover {
color: #ddd;
background-color: rgba(0, 85, 5, 0.6);
}
#glavni {
z-index: -1;
}
#jump {
visibility: hidden;
padding: 24px;
bottom: 0;
position: absolute;
}
.sezone {
text-align: center;
}
.prolece {
padding: 15px 5px;
margin: 60px 80px;
border: 2px solid rgba(0, 110, 5, 0.6);
background: rgba(0, 0, 0, .8);
border-radius: 0px 20px 0px 20px;
box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
width: 80%;
overflow: hidden;
}
.prolece p {
text-align: justify;
}
.prolece h3 {
text-align: center;
}
.prolece .galerija {
float: left;
width: 370px;
}
.leto {
padding: 15px 5px;
margin: 60px 80px;
border: 2px solid rgba(0, 110, 5, 0.6);
background: rgba(0, 0, 0, .8);
border-radius: 20px 0px 20px 0px;
box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
width: 80%;
overflow: hidden;
}
.leto p {
text-align: justify;
}
.leto h3 {
text-align: center;
}
.leto .galerija {
float: left;
width: 370px;
}
.jesen {
padding: 15px 5px;
margin: 60px 80px;
border: 2px solid rgba(0, 110, 5, 0.6);
background: rgba(0, 0, 0, .8);
border-radius: 0px 20px 0px 20px;
box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
width: 80%;
overflow: hidden;
}
.jesen p {
text-align: justify;
}
.jesen h3 {
text-align: center;
}
.jesen .galerija {
float: left;
width: 370px;
}
.zima {
padding: 15px 5px;
margin: 60px 80px;
border: 2px solid rgba(0, 110, 5, 0.6);
background: rgba(0, 0, 0, .8);
border-radius: 20px 0px 20px 0px;
box-shadow:0 0 10px rgba(50, 110, 55, 0.6);
width: 80%;
overflow: hidden;
}
.zima p {
text-align: justify;
}
.zima h3 {
text-align: center;
}
.zima .galerija {
float: left;
width: 370px;
}
.podnaslov1 {
background-color: rgba(50, 110, 55, 0.6);
color: white;
line-height: 40px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
text-decoration: underline;
}
.podnaslov2 {
color: white;
padding: 0px 0px 10px 0px;
font-size: 25px;
}
.opis::first-letter {
font-size: 35px;
}
.galerija > img {
padding: 4px 4px;
border: 1px solid #000;
background: url(https://i.imgur.com/dcWBP0v.jpg);
background-size: 350px 200px;
}
footer {
text-align: center;
background: #333;
color: #fff;
line-height: 50px;
border-top: 1px solid rgba(255,255,255, .1)
}
它应该看起来像this，当你按下GO！滚动到某个ID。 但是，这个整个标题图像没有显示，当我滚动背景图像时，页面大约有一半左右滚动然后停止。
提前谢谢！
