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在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:lefestivaldufilmloupe@gmail.com">lefestivaldufilmloupe@gmail.com</a>
        </h3></aside> 
</section>

并添加此CSS：

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

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

背景图像显示

1 个答案: