背景图像显示

Question

我的联系人部分出现了一个简单的图像显示问题。当您在第一次加载时转到该部分时，背景图像没有显示，当我重新加载它时，它正在显示但不像我想要的那样。我希望它像这个演示站点一样：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:lefestivaldufilmloupe@gmail.com">lefestivaldufilmloupe@gmail.com</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，预加载图像，修复。

Answer 1

部分问题可能是 html 损坏。有效的 html 在跨度内不能有“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:lefestivaldufilmloupe@gmail.com">lefestivaldufilmloupe@gmail.com</a>
        </h3></aside> 
</section>

并添加这个 CSS：

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

我在显示或未正确显示图像时出现不一致的行为，但解决此问题将消除它作为问题的一个因素，以便更容易确定问题的真正原因。