Скрыть без удаления фонового изображения

Есть ли способ скрыть фоновое изображение в CSS без его удаления? Для удобства я использую CSS, чтобы изменить, отображается ли оно или нет, и полагаться на класс, чтобы он показывался. Таким образом, по умолчанию он будет скрыт, но класс будет показывать его. Из-за этого фоновое изображение не может быть изменено. Какие фоновые свойства можно использовать для достижения этого? Изменение размера до "0 0" фактически сделало его 1px в верхнем левом углу - не полностью скрыто. Решения CSS3 принимаются.

Ответ 1

Просто встретил ту же проблему. Я использую:

background-size: 0 0;

Я думаю, что это немного дружелюбие, чем использование отрицательных значений huuuuge для background-position.

Ответ 2

Вы можете попытаться позиционировать фоновое изображение вне области видимости, например, установить

background-position: -9999px -9999px

или что-то менее резкое в зависимости от области видимости.

Ответ 3

Создайте атрибут css и используйте toggleClass:

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

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

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

Ответ 4

Вы можете использовать background-position и просто переместить его из вида элемента.

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

или

element.class{
  background:transparent;
}

Это второе решение должно работать. Я не тестировал его, и я не уверен, соответствует ли это его "удалению".

Ответ 5

background-position: -9000 -9000 - лучший выбор, я думаю

Ответ 6

Предполагая, что вы используете javascript, вы можете использовать это для изменения свойств. В примере, который я публикую ниже, я предполагаю, что у вас также есть jQuery lib, если бы не работало прямое манипулирование DOM. Я также вызываю элемент, который вы хотите переключить в исходное изображение node. И, наконец, этот метод использует файлы cookie.

= > Чтобы скрыть

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

= > Чтобы отобразить

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

Где

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

Это сработало для меня. Надежда помогает вам.

Ответ 7

Я думаю, что ответы на исходные позиции, вероятно, являются лучшими решениями, но я хотел бросить видимость в микс. Установка visible: hidden удалит его из вида, но сохранит структуру в такте.

Ответ 8

Один поворот на ретро-веб-дизайне - использование классического spacer.gif для замены/скрытия фонового изображения. Напомним, что spacer.gif использовался в качестве способа компоновки сетки (с таблицами) в ранние (ужасные) дни CSS. Это однопиксельное изображение с одним прозрачным пикселем.

Вы можете использовать spacer.gif в 21-м веке следующим образом:

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

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

Ответ 9

Чтобы добавить в микс, вы можете поместить 2 изображения в свойство стиля, а когда вы хотите их скрыть, просто измените их порядок в свойстве. Это будет отвечать потребностям не манипулировать изображением.

Ваш hider.gif может быть одним пикселем или совершенно другим изображением вообще.

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

Я не проверял этот код на наличие ошибок, поэтому покупатель остерегается: -)