背景圖像顯示

我的聯繫人部分有一個簡單的圖像顯示問題。當你在第一次加載時進入該部分時，背景圖像不顯示，當我重新加載時，它顯示但不是我想要的。我想它是想在這個演示網站：http://vandelaydesign.com/demos/single-page/這裏是我完整的網站：http://lefestivaldufilmloupe.com/indexNOFLOAT 背景圖像顯示

這裏是我的CSS：

#contact { 
height: 1050px; 
margin: auto; 
padding: 0; 
width: 100%; 
padding-top: 10%; 
background: url(../images/train.jpg)no-repeat center center; 
background-attachment: fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

我的HTML：

<section id="contact">  
     <aside><h3><span>Vous voulez nous proposer un film loupé&thinsp;? 
     N'hésitez pas à nous contacter&thinsp;: </span> 
     <a href="mailto:[email protected]">[email protected]</a> 
     </h3></aside> 
    </section>

什麼我失蹤？

我試過這兩種預加載我的圖像的方法，它仍然不能正常工作。 第一個：圖片在Firefox/Chrome上顯示，但不是全屏。

 <script> 
// better image preloading @ http://perishablepress.com 
    function preloader() { 
    if (document.getElementById) { 
    document.getElementById("contact").style.background = "url(images/train.jpg)     no-repeat center center";} 
    } 
    function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
    if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
    } 
    addLoadEvent(preloader); 
    </script>

這裏全碼：http://www.lefestivaldufilmloupe.com/indexPRELOAD1.html

二：完美在Firefox，而不是顯示在Chrome和Safari瀏覽器上的顯示部分。

<script> 
    $(document).ready(function(){ 

    $("#contact").hide(); //on cache le contenu 

    $("body").append('<div id="wait"><img src="../lefestivaldufilmloupe/images/loading.gif" alt="chargement..."/></div>') 
    }); 
    $(window).load(function(){ 

    $("#wait").hide(); 

    $("#contact").fadeIn(); 

    }); 
    </script>

這裏全碼：http://www.lefestivaldufilmloupe.com/indexPRELOADJQUERY.html

的問題來自於我的動畫類型。沒有Textillate.js和所有的依賴關係，它運作良好。我解決它這樣：首先，我加我接觸部分jquery.sticky：

<script> 
    $(document).ready(function(){ 
    $("#header").sticky({topSpacing:10}); 
    $("#lignejaune").sticky({topSpacing:0}); 
    $("#contact").sticky({topSpacing:1050}); 
    }); 
    </script>

然後我添加的z-index：-1;在我的#contact CSS。該圖像在Chrome/Safari中正確顯示，無論是否進行預加載，其變化不大。

編輯：糾正的HTML，預加載圖像，修復。

來源

2013-05-06 romu

請格式化您的代碼，嘗試閱讀未格式化的代碼會很痛苦，所以我跳過這個問題，看起來很有趣 – 2013-05-08 20:33:19

問題的一部分可能是壞HTML。有效的html在span內不能有「br」標籤。試試這個HTML：

<section id="contact"> 
    <aside><h3><span>Vous voulez nous proposer un film loupé&thinsp;? 
      N'hésitez pas à nous contacter&thinsp;: </span> 
      <a href="mailto:[email protected]">[email protected]</a> 
     </h3></aside> 
</section>

並添加此CSS：

#contact span { 
    display: block; 
    margin: 1em 0; 
}

我越來越不一致的行爲與顯示或顯示不正確的圖像，但固定這將消除其作爲問題的因素，以便更好地確定問題的真相。

來源

2013-05-07 00:10:32 Deborah

感謝，它現在在Firefox中完美工作。我在W3C檢查了我的html，沒有更多的錯誤。在Chrome/Safari中仍然不太好，我不知道如何解決這個問題。 – romu 2013-05-07 02:15:21

圖像相當大。我注意到，在Chrome中它部分地出現，然後在調整窗口中，它完全顯示。您是否嘗試過預加載它？ – Deborah 2013-05-07 17:09:27

是的，我嘗試了兩種預加載的方法，但它仍然不能正常工作。我編輯了我的問題。 – romu 2013-05-08 02:22:41

背景圖像顯示

回答

相關問題