Div幻燈片不顯示

我開始構建網站，但頁面上的每張幻燈片都不顯示。我顯示了導航欄，但下面的所有div都顯示爲空白。這是我的HTML：Div幻燈片不顯示

<!DOCTYPE html> 
<html> 
<head> 
<title>Michaela DeForest - Computer Science Student</title> 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 
<script src="http://jarallax.com/download/jarallax-min-0.2.js" type="text/javascript"></script> 
<script src="js/animations.js"></script> 
</head> 

<body onload="init()"> 

<ul> 
    <li><a href="#">Michaela DeForest</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">Portfolio</a></li> 
</ul> 

<section id="slide-home"> 
    <div class = "background"> 
     <div class = "container"> 
      <div class="content"> 
       <h1 id = "name">Michaela DeForest</h1> 
       <h2 id= "title">Computer Science Student at Franklin and Marshall College</h2> 
      </div> 
     </div> 
    </div> 
</section> 

<section id="slide-about"> 
    <div class= "background"> 
     <div class = "container"> 
      <div class="content"> 
       <h1>About</h1> 
       <p>I am a junior computer science student at Franklin and Marshall College.</p> 
      </div> 
     </div> 
    </div> 
</section> 

<section id= "slide-contact"> 
    <div class="background"> 
     <div class = "container"> 
      <div class="content"> 
       <h1>Contact</h1> 
       <h3>Email: [email protected]</h3> 
      </div> 
     </div> 
    </div> 
</section> 

<section id = "slide-portfolio"> 
    <div class="background"> 
     <div class = "container"> 
      <div class= "content"> 
       <h1>Portfolio</h1> 
      </div> 
     </div> 
    </div> 
</section> 

</body> 
</html>

我的CSS：

@font-face { 
    font-family:"Dense-Regular"; 
    src: url(../fonts/Dense-Regular.otf); 
} 

body, html { 
    height: 100%; 
    min-height: 100%; 
} 

section { 
    border: 1px solid black; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #3399ff; 
    width: 115%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
} 

li { 
    float: left; 
} 

li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-family: "Dense-Regular"; 
    font-size: 40px; 
} 

li a:hover { 
    background-color: #007fff 
} 

section { 
    min-width: 960px; 
    opacity: 0; 
} 

.background { 
    position: 50% 50%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
} 

.container { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 

.content { 
    max-width: 700px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

#slide-home .background { 
    background: url(../images/lightbulb.jpg); 
} 

#slide-about .background { 
    background-color: #99ccff; 
} 

#slide-contact .background { 
    background-color: #3399ff; 
} 

#slide-portfolio .background { 
    background-color: #32dcff; 
}

任何幫助將非常感激。我真的不知道我做錯了什麼。他們不顯示

來源

2015-12-23 Michaela DeForest

你可以添加fiddle.net演示頁面 – Manivannan

在這裏你去@Manivannan。 https://jsfiddle.net/3hfh47ty/ –

的原因之一是，你必須：

section { 
    opacity: 0; 
}

這使得他們看不到的。

此外，divs坐在你的菜單下。

我已經在這裏做了一些改變： https://jsfiddle.net/3hfh47ty/1/

來源

2015-12-23 03:46:19

這兩個看起來像問題，但他們沒有解決問題。 –

@MichaelaDeForest我更新了我的答案，對你的小提琴做了一些改變。我不確定你的目標是什麼，但他們現在正在展示。 –

謝謝！我可以從這裏出發，但是，這解決了我的問題！ –

opacity: 0;

那是你的問題，這意味着沒有可視性

透明度範圍從0 - 1。1，增量爲1意味着完全不透明和零意味着完全隱形

來源

2015-12-23 03:46:28

我甚至沒有意識到這一點，但改變這並沒有解決問題。 –

Div幻燈片不顯示

回答

相關問題