製作HTML文件的CSS背景 - 可能嗎？

我一直在爲一個朋友製作一個網站，基本上我使用了一個教程來製作旋轉圖像的背景。使用GIF的鬆散圖像顏色爲我省去了麻煩。無論如何，這裏的問題是：我使它作爲背景工作，並使其出現在導航背後，但是當我導航不活動時（例如，儘管導航背後出現圖像，它會註冊爲它的前面，所以你不能點擊任何東西），並且每當圖像淡出爲新圖像時，導航消失並重新出現在新圖像上。我玩Z指數，但沒有任何喜悅，非常困惑。製作HTML文件的CSS背景 - 可能嗎？

我知道這些東西可能會尷尬的解釋，所以在這裏，讓自己有一個測試服務器！

http://78.47.244.67/John/index.php

這至少說明發生了什麼，我也可以提供代碼：

這裏是後臺代碼，在CSS，HTML和Javascript圖像旋轉：

<html> 
    <head> 
     <style type="text/css"> 
      body { 
       color:#000; 
       background-color:#000; 
      } 
     </style> 

     <style type="text/css"> 
      div.rotator { 
       position:relative; 
       display:none; 
      } 

      div.rotator ul li { 
       float:left; 
       position:absolute; 
       list-style: none; 
       margin:0px; 
       padding:0px; 
      } 

      div.rotator ul li img { 
       width:1600px; 
       height:780px; 
       margin:0px; 
       padding:0px; 
      } 

      div.rotator ul li.show { 
       z-index:-500; 
      } 
     </style> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

     <script type="text/javascript"> 
      function theRotator() { 
       $('div.rotator ul li').css({opacity: 0.0}); 
       $('div.rotator ul li:first').css({opacity: 1.0}); 
       setInterval('rotate()',6000); 
      } 

      function rotate() { 
       var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first')); 
       if(current.length == 0) current = $('div.rotator ul li:first'); 
       var next = ((current.next().length) ? ((current.next().hasClass('show')) ? 
       $('div.rotator ul li:first') :current.next()):$('div.rotator ul li:first')); 
       //Un-comment the 3 lines below to get the images in random order 
       var sibs = current.siblings(); 
       var rndNum = Math.floor(Math.random() * sibs.length); 
       var next = $(sibs[ rndNum ]); 
       //Set the fade in effect for the next image, the show class has higher z-index 
       next.css({opacity: 0.0}) 
       .addClass('show') 
       .animate({opacity: 1.0}, 1000); 
       current.animate({opacity: 0.0}, 1000) 
       .removeClass('show'); 
      }; 

      $(document).ready(function() {  
       theRotator(); 
       $('div.rotator').fadeIn(1000); 
       $('div.rotator ul li').fadeIn(1000); 
      }); 
     </script> 
    </head> 

    <body> 
     <div class="rotator"> 
      <ul> 
       <li class="show"><img src="img/trackbike.jpg"/></li> 
       <li><img src="img/trackcar.jpg"/></li> 
       <li><img src="img/drifting.jpg"/></li> 
       <li><img src="img/mtb.jpg"/></li> 
       <li><img src="img/wildlife.jpg"/></li> 
      </ul> 
     </div> 
    </body> 
</html>

這裏是導航的CSS代碼：

#sideNav { 
    width:270px; 
    height:900px; 
    float:left; 
    background-color: rgba(0, 0, 0, 0.5); 
    z-index:500; 
} 

#sideNav img { 
    padding-left:65px; 
    padding-top:120px; 
    padding-bottom:100px; 
} 

#sideNav a { 
    padding-left:65px; 
    color:#CCC; 
    text-decoration:none; 
    font: 28px Verdana, Geneva, sans-serif; 
} 

#sideNav li a:hover, 
#sideNav li.current-page a { 
    color:#ffc600; 
} 

#sideNav p a { 
    float:right; 
    font:10px Verdana, Geneva, sans-serif; 
    color:#fff; 
    text-decoration:none; 
} 

#sideNav p a:hover { 
    color:#ffc600; 
} 

#sideNav p { 
    font-size:10px; 
    color:#FFF; 
    padding-top:100px; 
    padding-left:62px; 
    width:120px; 
}

任何人都能想出一個爲什麼？或者更好的解決方案？我很爲難：/

任何幫助是非常讚賞，

鉭，約翰

來源

2012-12-21 John McPherson

@第一眼，你的標記是混亂的;有兩個body元素和兩個關閉html元素......調試在你修復這些東西之前毫無意義。 – albert

@albert我沒有看到兩個''元素...也許有一個快速編輯我猜 – Pointy

在同一元素上使用「float：left」和「position：absolute」沒有任何意義。 – Pointy

爲什麼？不知道，但如果添加

z-index: -1

到rotator類，盤旋看起來像它的工作原理，你想讓它。

來源

2012-12-21 01:51:38

+1，但LOL ...你怎麼不知道..你發佈了答案..'.rotator'在元素前面。並且'z-index'在定位元素內工作。因此，將'z-index'應用於'li'元素只會改變它們在'div.rotator'容器內的順序。他需要把實際的容器放在導航的後面.. –

Awww你的小傳說：P現在完美的工作，謝謝你：D –

製作HTML文件的CSS背景 - 可能嗎？

回答

相關問題