Cacher sans enlever l'image de fond

Est-il un moyen de masquer l'image de fond en CSS sans l'enlever? Pour plus de commodité, je suis en utilisant le CSS pour changer de si oui ou non il est affiché, et en s'appuyant sur une classe pour en faire apparaître. Donc, par défaut, il serait caché, mais la classe serait de la faire apparaître. De ce fait, l'image d'arrière-plan ne peut pas être modifié. Quelles propriétés de l'arrière-puis-je utiliser pour y parvenir? Modification de la taille de "0 0" réellement 1px dans le coin en haut à gauche - pas complètement caché. CSS3 solutions sont acceptés.

InformationsquelleAutor student | 2011-05-06

25

Viens de rencontrer le même problème.
J'utilise:

background-size: 0 0;

Je pense que c'est un peu convivial que l'utilisation de certains huuuuge des valeurs négatives pour les background-position.
- Pour ajouter à cela, vous pouvez également afficher l'arrière-plan à l'aide de fond de taille: automatique
- Merci! Le grand truc qui a fonctionné parfaitement pour moi.
- A parfaitement fonctionné pour moi, merci!
InformationsquelleAutor Tamás Pap
11

Vous pouvez essayer le positionnement de l'image d'arrière-plan en dehors de la zone visible, comme la mise en

background-position: -9999px -9999px

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

InformationsquelleAutor Paul Sham

Créer un attribut css et l'utilisation toggleClass:

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

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

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

c'est travaillé pour moi

InformationsquelleAutor FaJo

1

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

InformationsquelleAutor Tomasz Golinski
1

Vous pouvez utiliser background-position et il suffit de déplacer hors de la vue de l'élément.
```
element.class{
  background-position:-9999px;
}
```
ou
```
element.class{
  background:transparent;
}
```
Que la deuxième solution devrait fonctionner. Je ne l'ai pas testé et je ne suis pas sûr si c'est admissible à titre de "l'enlever."

InformationsquelleAutor Vian Esterhuizen

En supposant que vous êtes à l'aide de javascript, vous pouvez l'utiliser pour modifier les propriétés. Dans l'exemple que je viens de poster ci-dessous, je suis en supposant que vous avez également lib jQuery, si ce n'est un droit en haut de manipulation du DOM serait aussi travailler. J'appelle également l'élément que vous souhaitez modifier ses arrière-plan de l'image nœud d'entrée. Et enfin, cette méthode utilise des cookies.

=>Pour masquer

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

=>Pour 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. Espoir vous aide.

InformationsquelleAutor Prokenyan

0

Je pense que le fond de la position réponses sont probablement la meilleure des solutions, mais je voulais la jeter visibilité dans le mélange. Réglage visible: hidden vais l'enlever de la vue, mais de garder la structure de tact.
- Il demande juste une image d'arrière-plan solution. Que se cache l'ensemble de l'élément.
- Et? Sans voir son balisage-t-il pas contenu dans l'élément, et ce serait parfaitement viable option.
- "Quelles propriétés de l'arrière-puis-je utiliser pour y parvenir? "... "masquer l'image de fond en CSS" Il est assez clair que il est à la recherche pour un simple arrière-plan solution. Cette réponse n'est tout simplement pas utile pour la situation.
InformationsquelleAutor Dustin Laine
0

Une torsion sur la rétro conception web est d'utiliser le classique spacer.gif pour remplacer/masquer votre image d'arrière-plan. Rappelons que spacer.gif a été utilisé comme un moyen à la disposition d'un système de grille (avec tables) de retour dans le début (c'est horrible) jours de la CSS. C'est un pixel de l'image avec un pixel transparent.

Vous pouvez utiliser spacer.gif dans le 21e siècle comme ceci:
```
#ImageBox
{
    background: url(../images/my-regular-background.png) no-repeat center center;

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

Juste à ajouter au mélange, vous pouvez mettre les 2 images dans le style de propriété, et quand vous le voulez, de cacher, il suffit de changer l'ordre dans la propriété. Cela permettra de répondre aux besoins de ne pas manipuler l'image.

Votre hider.gif peut être un seul pixel ou un de complètement différent de l'image tout à fait.
```
<!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, afin que l'acheteur méfiez-vous 😉

InformationsquelleAutor alfadog67

Vous devez vous connecter pour publier un commentaire.