Comment faire un fondu en image de fond?

Je souhaite qu'une image soit préchargée et qu'elle se bloque lorsqu'elle est prête. J'ai le pré-chargeur qui fonctionne mais je ne peux pas obtenir l'effet de fondu.Comment faire un fondu en image de fond?

Ce que j'ai essayé:

1: transitions CSS3 - ne fonctionne pas pour les images d'arrière-plan. 2: jQuery fadeIn - fonctionne uniquement sur les éléments HTML et non sur l'image de fond CSS. Essayer de faire disparaître un élément entraîne la disparition de tous les éléments.

jQuery:

$(bg).imagesLoaded({ 
    done: function($images){ 
     $('body').css('background-image', "url('" + $images[0].src + "')");

CSS:

body{ 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-size:cover; 
}

Je comprends qu'il ne peut être un moyen habile d'y parvenir, mais je l'ai vu faire ici par exemple il doit y avoir un moyen : http://movies.io/m/4I/en.

Source

2012-11-09 DominicM

-t-il d'être une image de fond? Y a-t-il une raison pour laquelle vous ne pouvez pas simplement utiliser l'élément img? Vous pouvez le faire avec des transitions css btw – alimac83

Vous pouvez créer un élément séparé et affecter l'ensemble de l'élément, plutôt que de mettre une image de fond sur le corps. – Chad

C'est l'image de fond sur le lien que vous avez donné, il doit donc s'agir d'un autre élément qui a une couleur de fond noire et disparaît une fois l'image chargée. – Archer

En fin de compte je une solution plus élégante qui ne nécessitent pas d'autres éléments div. Ce qui se passe ici, c'est que lorsque l'image a fini de charger, l'image de fond css sera ajoutée avec jquery et la classe qui définit la couleur du corps sur blanc est atténuée. J'espère que c'est utile à quelqu'un!

jQuery: (en images fonction chargée)

$('body').css('background-image', "url('" + $images[0].src + "')"); 
$('#wrapper').removeClass("bgFade", 700);

CSS:

.bgFade{ 
    background-color:#FFF; 
}

Source

2012-11-24 15:55:05 DominicM

Vous pouvez devrait faire quelque chose comme ça

<div> <-- the block 
    <div class="background"> 
    </div> 
    <div class="content"> 
    ... 
    </div> 
</div>

position d'utilisation: mettre .content sur le .background div absolu. Et Apple FadeIn au .background. Ceci est également utilisé lorsque vous avez besoin d'un fond opaque dans div.

Source

2012-11-09 17:54:24 Greg

lire [this] (http://www.sitepoint.com/css-center-position-absolute-div/) pour centrer des éléments positionnés de manière absolue ou utiliser du javascript – Greg

Si vous avez vraiment besoin de la solution d'image d'arrière-plan, puis créer les éléments, définissez les images de fond sur eux, quelque chose comme ceci:

background-image: url('http://placekitten.com/200/300');<br>

Et puis animer les éléments individuels en utilisant jQuery.

Voici un violon pour la démonstration:
http://jsfiddle.net/robertp/6rXjs/3/embedded/result/

Cheers,
Rob

Source

2012-11-09 18:20:01 robertp

Comment faire un fondu en image de fond?

Répondre

Questions connexes