3

連絡先セクションの画像表示に単純な問題があります。最初の読み込み時にセクションに移動すると、背景画像が表示されません。再読み込みすると、表示されますが、表示したくありません。このデモ サイトのようにしたい: 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>

私が欠けているものは何ですか？

画像をプリロードするこの 2 つの方法を試しましたが、まだうまくいきません。 最初の 1 つ: 画像は表示されますが、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

2番目：Firefoxでは完璧、クロムでは表示されず、サファリでは部分的に表示されます。

    <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 の修正、画像のプリロード、修正。

4

1 に答える 1

0

問題の一部は、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;
}

画像を正しく表示するかどうかで一貫性のない動作が発生していますが、これを修正すると、問題の要因としてそれが排除されるため、実際の問題を特定しやすくなります。

于 2013-05-07T00:10:32.777 に答える