web-dev-qa-db-fra.com

Masquer sans supprimer l'image de fond

Est-il possible de masquer l'image d'arrière-plan en CSS sans la supprimer? Pour plus de commodité, j'utilise CSS pour changer son affichage ou non, et je fais appel à une classe pour le rendre visible. Donc, par défaut, il serait caché, mais la classe le montrerait. Pour cette raison, l'image d'arrière-plan ne peut pas être modifiée. Quelles propriétés d'arrière-plan puis-je utiliser pour y parvenir? Changer la taille en "0 0" en fait en fait 1px dans le coin supérieur gauche - pas complètement caché. Les solutions CSS3 sont acceptées.

csscss3background-image
20
student

Je viens de rencontrer le même problème… ..J’utilise:

background-size: 0 0;

Je pense que c’est un peu plus convivial que d’utiliser des valeurs négatives énormes pour background-position.

24
Tamás Pap

Vous pouvez essayer de positionner l’image d’arrière-plan en dehors de la zone visible, comme pour le paramètre

background-position: -9999px -9999px

ou quelque chose de moins drastique en fonction de la zone visible.

11
Paul Sham

Créez un attribut css et utilisez toggleClass:

.class {
  background-image: url(...);
}

.class.toggle {
 background-image: none;
}

$('.class').toggleClass('toggle');
4
FaJo

background-position: -9000 -9000 est le meilleur choix je pense

1
Tomasz Golinski

Vous pouvez utiliser background-position et le déplacer simplement hors de la vue de l'élément.

element.class{
  background-position:-9999px;
}

ou 

element.class{
  background:transparent;
}

Cette deuxième solution devrait fonctionner. Je ne l'ai pas testé et je ne suis pas sûr que cela puisse être qualifié de "suppression".

1
Vian Esterhuizen

En supposant que vous utilisiez javascript, vous pouvez l'utiliser pour modifier les propriétés. Dans l'exemple que je publie ci-dessous, je suppose que vous avez également jQuery lib, sinon une manipulation DOM vers le haut fonctionnerait également. J'appelle également l'élément que vous souhaitez activer/désactiver son nœud d'entrée d'image d'arrière-plan. Et enfin cette méthode utilise des cookies.

=> Cacher

   setCookie(inputNode.name, $(inputNode).css("background-image"),1);
   $(inputNode).css("background-image", "url()");

=> À afficher

$(inputNode).css("background-image",getCookie(inputNode.name));

Où

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}



function getCookie(c_name)
   {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
     x=x.replace(/^\s+|\s+$/g,"");
    if (x==c_name)
    {
    return unescape(y);
    }
     }
    }

Cela a fonctionné pour moi. Hope vous aide.

1
Prokenyan

Une retouche dans la conception Web rétro consiste à utiliser le classique spacer.gif pour remplacer/masquer votre image d’arrière-plan. Rappelez-vous que spacer.gif a été utilisé comme moyen de mettre en forme un système de grille (avec des tableaux) au tout début (horrible) du CSS. C'est une image d'un pixel avec un pixel transparent.

Vous pouvez utiliser spacer.gif au 21ème siècle comme ceci:

#ImageBox
{
    background: url(../images/my-regular-background.png) no-repeat center center;

    &.ImageLoaded
    {
        background-image: url(../images/spacer.gif);
    }
}
0
rasx

Je pense que les réponses aux positions d'arrière-plan sont probablement les meilleures solutions, mais je voulais donner de la visibilité au mélange. Régler visible: hidden le retirera de la vue mais gardera la structure intacte.

0
Dustin Laine

Juste pour ajouter au mélange, vous pouvez placer 2 images dans la propriété de style, et lorsque vous souhaitez en masquer une, modifiez simplement leur ordre dans la propriété. Cela répondra aux besoins de ne pas manipuler l'image.

Votre hider.gif peut être un pixel unique ou une image complètement différente.

<!DOCTYPE html>
<html>
<head>
<style> 
bg_hidden {
    background-image: url(hider.gif), url(realImage.jpg);

}
bg_shown {
    background-image: url(realImage.jpg), url(hider.gif);
    background-repeat: repeat, repeat;
}

</style>
</head>
<body>

<div class="bg_shown">
<button onclick="this.parent.className='bg_hidden'">Hide BG</button>
</div>

</body>
</html>

Je n'ai pas vérifié ce code pour les bugs, alors méfiez-vous des acheteurs ;-)

0
alfadog67