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

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

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

或

element.class{
  background:transparent;
}

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

Answer 5

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

Answer 6

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

=＆gt;隐藏

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

=＆gt;取消隐藏

$(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 7

我认为背景位置答案可能是最好的解决方案，但我想提高对混音的了解。设置visible: hidden会将其从视图中删除，但仍保持结构。

Answer 8

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

你可以在21世纪使用spacer.gif：

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

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

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

我没有检查此代码是否有错误，所以买家要小心; - ）

隐藏而不删除背景图像

9 个答案: