it-swarm.com.ru

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

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

20
student

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

background-size: 0 0;

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

24
Tamás Pap

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

background-position: -9999px -9999px

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

11
Paul Sham

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

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

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

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

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

1
Tomasz Golinski

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

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

или же 

element.class{
  background:transparent;
}

Это второе решение должно работать. Я не проверял это, и я не уверен, что это квалифицируется как «удаление».

1
Vian Esterhuizen

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

=> Спрятать

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

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

1
Prokenyan

Один из поворотов в ретро-дизайне - это использование классического 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);
    }
}
0
rasx

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

0
Dustin Laine

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

Ваш 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>

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

0
alfadog67