web-dev-qa-db-fra.com

Comment s'estomper en changeant l'image de fond

Je veux effacer les images quand je fais ce code:

$("#large-img").css('background-image', 'url('+$img+')');

J'ai essayé de mettre fondu dans tant d'endroits.

Merci

jquerybackgroundfade
45
fadejquery

C'est probablement ce que tu voulais:

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);

Avec un délai de 1 seconde:

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);
74
MacMac

Puis-je proposer une solution alternative?

J'avais le même problème et le fondu ne fonctionnait pas car il effaçait tout l'élément, pas seulement l'arrière-plan. Dans mon cas, l'élément était le corps, alors je voulais seulement atténuer l'arrière-plan.

Une façon élégante de résoudre ce problème consiste à classer l'élément et à utiliser la transition CSS3 pour l'arrière-plan.

transition: background 0.5s linear;

Lorsque vous modifiez l'arrière-plan, soit avec toggleClass, soit avec votre code, $("#large-img").css('background-image', 'url('+$img+')');, il s'estompe tel que défini par la classe.

55
Rampant Creative Group

C’est la seule chose raisonnable que j’ai trouvée pour atténuer une image de fond.

<div id="foo">
  <!-- some content here -->
</div>

Votre CSS; maintenant amélioré avec transition CSS .

#foo {
  background-image: url(a.jpg);
  transition: background 1s linear;
}

Maintenant échanger l'arrière-plan

document.getElementById("foo").style.backgroundImage = "url(b.jpg)";

Voilà, ça s'efface!

Clause de non-responsabilité évidente ( si votre navigateur ne supporte pas la propriété CSS3 transition, cela ne fonctionnera pas. Dans ce cas, l'image changera sans une transition. Donné <1% du navigateur de vos utilisateurs ne supporte pas CSS3, c'est probablement bien. Ne te fais pas d'illusions, ça va.

21
user633183

En me basant sur la solution de Rampant Creative Group ci-dessus, j’utilisais jQuery pour modifier l’image d’arrière-plan de la balise body:

par exemple.

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'});

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'});

J'ai eu une minuterie javascript qui a basculé entre les deux déclarations.

Tout ce que je devais faire pour résoudre le problème de la création d’un effet de fondu en fondu était de suivre la suggestion de Rampant Creative Group et d’ajouter

transition: background 1.5s linear;

à mon code. Maintenant, il s'estompe et est magnifique.

Merci Rampant Creative Group et SoupEnvy pour le montage !!

6
Ben

Quelqu'un m'a indiqué ce fil parce que j'avais le même problème mais que cela ne fonctionnait pas pour moi. Après des heures de recherche, j'ai trouvé une solution en utilisant ceci - https://github.com/rewish/jquery-bgswitcher#readme

Il a aussi quelques options autres que le fondu.

1
Bizzaro

Si vous essayez de fondre l’image d’arrière-plan mais que vous laissez le texte/les images au premier plan, vous pouvez utiliser css pour séparer l’image d’arrière-plan en une nouvelle division et la positionner sur la division contenant le texte/les images, puis fondre la division d’arrière-plan.

0
iandayman

Cela peut aider

HTML

<div id="textcontainer">        
    <span id="sometext">This is some information </span>
    <div id="container">

    </div>
</div>

CSS

#textcontainer{
    position:relative;
    border:1px solid #000;
    width :300px;
    height:300px;
}
#container{
    background-image :url("http://dcooper.org/gallery/cf_appicon.jpg");
    width :100%;
    height:100%;
}
#sometext{
    position:absolute;
    top:50%;
    left:50%;
}

Js

$('#container').css('opacity','.1');
0
Anooj

L'opacité sert votre but?

Si oui, essayez ceci:

$('#elem').css('opacity','0.3')
0
Soulbe