隐藏而不删除背景图像

Question

有没有办法隐藏CSS中的背景图像而不删除它？ 为方便起见，我使用CSS来改变它是否显示，并依靠一个类来显示它。 所以，默认情况下，它会被隐藏，但是类会让它显示出来。 因此，不能改变背景图像。 我可以使用哪些背景属性来实现此目的？ 将大小更改为“0 0”实际上使其在左上角变为1px - 未完全隐藏。 CSS3解决方案被接受。

Answer 1

刚遇到同样的问题。 我用：

background-size: 0 0;

我认为这比使用background-position一些huuuuge负值更友好一些。

Answer 2

您可以尝试将背景图像定位在可视区域之外，例如设置

background-position: -9999px -9999px

或根据可视区域不那么剧烈的东西。

Answer 3

创建一个css属性并使用toggleClass：

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

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

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

Answer 4

假设您使用的是javascript，您可以使用它来修改属性。 在我发布的示例中，我假设你也有jQuery lib，如果不是直接的DOM操作也可以。 我也在调用你希望切换其背景图像输入节点的元素。 最后这个方法使用cookies。

=>隐藏

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

这对我有用。 希望能帮到你。

Answer 5

您可以使用background-position并将其移出元素视图。

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

要么

element.class{
  background:transparent;
}

第二个解决方案应该有效。 我没有测试过它，我不确定它是否符合“删除它”的条件。

Answer 6

background-position: -9000 -9000是我认为的最佳选择

Answer 7

复古网页设计的一个转折是使用经典的spacer.gif来替换/隐藏您的背景图像。 回想一下，在CSS的早期（可怕）时代， spacer.gif被用作布局网格系统（带表格）的一种方式。 它是具有一个透明像素的单像素图像。

您可以在21世纪使用spacer.gif，如下所示：

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

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

Answer 8

只是要添加到混合中，您可以在样式属性中放置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>

我没有检查这个代码的bug，所以买家要小心;-)

Answer 9

我认为背景位置答案可能是最好的解决方案，但我想提高对混合的可见性。 设置visible: hidden将从视图中删除它，但保持结构的机智。

隐藏而不删除背景图像

问题描述

9 个解决方案

解决方案1
26 2014-09-28 07:39:52

解决方案2
12 2011-05-06 16:07:57

解决方案3
4 2015-01-09 07:39:56

解决方案4
1 2012-11-13 20:12:27

解决方案5
1 2011-05-06 16:08:04

解决方案6
1 2011-05-06 16:12:03

解决方案7
0 2012-12-13 21:17:54

解决方案8
0 2017-05-08 15:49:59

解决方案9
0 2011-05-06 16:09:51

隐藏而不删除背景图像

问题描述

9 个解决方案

解决方案1 26 2014-09-28 07:39:52

解决方案2 12 2011-05-06 16:07:57

解决方案3 4 2015-01-09 07:39:56

解决方案4 1 2012-11-13 20:12:27

解决方案5 1 2011-05-06 16:08:04

解决方案6 1 2011-05-06 16:12:03

解决方案7 0 2012-12-13 21:17:54

解决方案8 0 2017-05-08 15:49:59

解决方案9 0 2011-05-06 16:09:51

解决方案1
26 2014-09-28 07:39:52

解决方案2
12 2011-05-06 16:07:57

解决方案3
4 2015-01-09 07:39:56

解决方案4
1 2012-11-13 20:12:27

解决方案5
1 2011-05-06 16:08:04

解决方案6
1 2011-05-06 16:12:03

解决方案7
0 2012-12-13 21:17:54

解决方案8
0 2017-05-08 15:49:59

解决方案9
0 2011-05-06 16:09:51