Только фоновое изображение должно исчезать на странице загрузки

У меня есть div с фоновым изображением (стрелка). В div есть текст, стрелка находится ниже него. Я хочу, чтобы текст внутри div загружался со страницы, но фоновое изображение загружалось через несколько секунд.Только фоновое изображение должно исчезать на странице загрузки

Это мой код:

.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; } 
}

Проблема: весь ДИВ (текст и фоновое изображение) выцветает Есть ли способ сделать фоновое изображение выгорает, не текст.?

Спасибо, Stefaan

источник

2013-11-26 Stefaan

Попробуйте следующее

<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>

Я поместил текст вне DIV, применяется положение относительно содержащего DIV и позицию абсолютного к тексту. Я также дал образ div ширину и высоту.

Надеюсь, это поможет.

источник

2013-11-26 13:00:28 Sico

Благодарим вас за помощь! Это не сработало, к сожалению ... Я добавил ссылку на мою домашнюю страницу в вопросе, надеюсь, что это поможет ... – Stefaan

Привет, Стефан, работал в моей тестовой среде. Вы взяли внутреннее содержимое из DIV, как я, и поместили вокруг него обертку? Вот JSFiddle http://jsfiddle.net/EL6DW/ – Sico

как ваш дизайн сайта, кстати! – Sico

Только фоновое изображение должно исчезать на странице загрузки

ответ

Смежные вопросы