Nur hintergrund Bild fade-in beim laden der Seite

Ich habe ein div mit einem hintergrund Bild (ein Pfeil). In das div-Element text, der Pfeil ist unterhalb es. Ich möchte den text innerhalb der div-laden mit der Seite, aber das hintergrund Bild laden, ein paar Sekunden später.

Dies ist mein code:

.homearrow {
    background: url(http://www.stefaanoyen.be/wp-content/uploads/2013/03/arrow.png) no-repeat 200px 155px;
    background-size: 125px 125px;
    float: left;
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -moz-animation: fadein 4s; /* Firefox */
    -ms-animation: fadein 4s; /* Internet Explorer */
    -o-animation: fadein 4s; /* Opera */
    animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

Das problem: das ganze div (text und hintergrund-Bild) eingeblendet wird. Gibt es eine Möglichkeit, um den hintergrund image-fade-in, nicht den text?

Danke,
Stefaan

InformationsquelleAutor Stefaan | 2013-11-26
  1. 5

    Versuchen Sie die folgenden

    <html>
 <head>

    <style>

        .wrapper {position: relative;  margin: 15px 15px 15px 15px ;}

        .homearrow {
            background: #fff url('arrow.png') 0px 0px no-repeat ;
            background-size: 125px 125px;
            float: left;
            -webkit-animation: fadein 4s; /* Safari and Chrome */
            -moz-animation: fadein 4s; /* Firefox */
            -ms-animation: fadein 4s; /* Internet Explorer */
            -o-animation: fadein 4s; /* Opera */
            animation: fadein 4s;
            height: 125px;
            width: 125px;
            position: absolute;  top: 0px; left: 0px;
        }

        .homearrowtext {position: absolute; top: 10px; left: 10px; }


        @keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Firefox */
        @-moz-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Safari and Chrome */
        @-webkit-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Internet Explorer */
        @-ms-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }​

        /* Opera */
        @-o-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }​
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="homearrow"></div>
        <p class="homearrowtext">Hello World</p>
    </div>
</body>

    Ich habe den text außerhalb des div, angewendet position relativ zu dem mit div und position absolut zum text. Ich habe auch das Bild-div-einige Breite und Höhe.

    Hoffe, das hilft.

    • Danke für die Unterstützung! Das hat nicht funktioniert, leider... ich habe einen link zu meiner homepage in der Frage, hoffe, das hilft...
    • Hallo Stefan, war in meiner test-Umgebung. Hast du den inneren Gehalt aus der DIV, wie ich Tat und legte ein wrapper um ihn herum? Hier ein JSFiddle jsfiddle.net/EL6DW
    • wie Sie Ihre Website-design übrigens!
    • Es funktioniert! Mein Fehler : ) Danke!
    • Kein problem, Stefaan
    InformationsquelleAutor Sico
Schreibe einen Kommentar