Ocultar sin eliminar la imagen de fondo

¿Hay alguna forma de ocultar la imagen de fondo en CSS sin eliminarla? Para mayor comodidad, uso CSS para cambiar si se muestra o no, y confiar en una clase para que se muestre. Entonces, por defecto, estaría oculto, pero la clase lo haría mostrar. Debido a esto, la imagen de fondo no puede ser alterada. ¿Qué propiedades de fondo puedo usar para lograr esto? Cambiar el tamaño a "0 0" en realidad lo hizo 1px en la esquina superior izquierda, no completamente oculto. Se aceptan soluciones CSS3.Ocultar sin eliminar la imagen de fondo

Fuente

2011-05-06 student

usted podría intentar posicionar la imagen de fondo fuera del área visible, como el establecimiento

background-position: -9999px -9999px

o algo menos drástico dependiendo del área visible.

Fuente

2011-05-06 16:07:57

Puede usar background-position y simplemente moverlo fuera de la vista del elemento.

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

element.class{ 
    background:transparent; 
}

Esa segunda solución debería funcionar. No lo he probado y no estoy seguro de si eso califica como "eliminarlo".

Fuente

2011-05-06 16:08:04

Creo que las respuestas de posición de fondo son probablemente las mejores soluciones, pero quería dar visibilidad a la mezcla. El ajuste visible: hidden lo eliminará de la vista, pero mantendrá la estructura intacta.

Fuente

2011-05-06 16:09:51

Está pidiendo sólo una solución de imagen de fondo. Eso escondería todo el elemento. –

Y? Sin ver su marcado, puede que no tenga contenido en el elemento y esta sería una opción perfectamente viable. –

"¿Qué propiedades de fondo puedo usar para lograr esto?" ... "ocultar la imagen de fondo en CSS" Está bastante claro que está buscando una solución puramente de fondo. Esta respuesta simplemente no es útil para la situación. –

background-position: -9000 -9000 es mejor opción que pienso

Fuente

2011-05-06 16:12:03

Suponiendo que está usando JavaScript, podría utilizar eso para modificar las propiedades. En el ejemplo que publico a continuación, asumo que usted también tiene jQuery lib, si no, una manipulación DOM directa también funcionaría. También estoy llamando al elemento que desea alternar su nodo de entrada de imagen de fondo. Y finalmente este método usa cookies.

=> Para ocultar

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

=> Para mostrar

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

Dónde

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

Esto funcionó para mí. Hope te ayuda.

Fuente

2012-11-13 20:12:27 Prokenyan

Un giro en el diseño web retro es utilizar el clásico spacer.gif para reemplazar/ocultar su imagen de fondo. Recordemos que spacer.gif was used como una forma de diseñar un sistema de grillas (con tablas) en los primeros (horribles) días de CSS. Es una imagen de un píxel con un píxel transparente.

Puede utilizar spacer.gif en el siglo 21 como esto:

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

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

Fuente

2012-12-13 21:17:54 rasx

acaba de conocer el mismo problema. que utilizo:

background-size: 0 0;

Creo que es un poco más amigable que el uso de algunos valores negativos huuuuge para background-position.

Fuente

2014-09-28 07:39:52

Para agregar a esto, también puede mostrar el fondo usando el tamaño de fondo: auto –

¡Gracias! Gran truco que funcionó perfectamente para mí. –

¡Funcionó perfectamente para mí, gracias! –

Crear un atributo css y utilizar toggleClass:

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

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

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

Fuente

2015-01-09 07:39:56 FaJo

sólo para añadir a la mezcla, se puede colocar 2 imágenes en la propiedad de estilo, y cuando se desea ocultar uno, basta con cambiar el orden de ellas en la propiedad Esto satisfará las necesidades de no manipular la imagen.

Su hider.gif puede ser un solo píxel o una imagen completamente diferente.

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

No he comprobado el código de errores, por lo que el comprador tenga cuidado ;-)

Fuente

2017-05-08 15:49:59 alfadog67

Ocultar sin eliminar la imagen de fondo

Respuesta

Cuestiones relacionadas