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

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

21 голосов
/ 06 мая 2011

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

Ответы [ 9 ]

25 голосов
/ 28 сентября 2014

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

background-size: 0 0;

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

11 голосов
/ 06 мая 2011

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

background-position: -9999px -9999px

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

4 голосов
/ 09 января 2015

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

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

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

$('.class').toggleClass('toggle');
1 голос
/ 14 ноября 2012

Предполагая, что вы используете 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 голос
/ 06 мая 2011

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

1 голос
/ 06 мая 2011

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

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

или 

element.class{
  background:transparent;
}

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

0 голосов
/ 08 мая 2017

Просто чтобы добавить к миксу, вы можете поместить 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 голосов
/ 14 декабря 2012

Один из аспектов ретро-веб-дизайна - использовать классический 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 голосов
/ 06 мая 2011

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

...