CSS 隐藏而不删除背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5914039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide without removing background image
提问by student
Is there a way to hide the background image in CSS without removing it? For convenience, I'm using CSS to change whether or not it is displayed, and relying on a class to make it show. So, by default, it would be hidden, but the class would make it show. Because of this, the background image cannot be altered. What background properties can I use to achieve this? Changing the size to "0 0" actually made it 1px in the top left corner - not completely hidden. CSS3 solutions are accepted.
有没有办法在 CSS 中隐藏背景图像而不删除它？为方便起见，我使用 CSS 来更改它是否显示，并依靠一个类来使其显示。所以，默认情况下，它会被隐藏，但类会让它显示。因此，无法更改背景图像。我可以使用哪些背景属性来实现这一点？将大小更改为“0 0”实际上使其左上角为 1px - 未完全隐藏。接受 CSS3 解决方案。
回答by Tamás Pap
Just met the same problem. I use:
刚遇到同样的问题。我用：
background-size: 0 0;
background-size: 0 0;
I think it's a little bit friendlierthan using some huuuuge negative values for background-position.
我认为这比使用一些 huuuuge 负值更友好一些background-position。
回答by Paul Sham
You could try positioning the background image outside of the viewable area, like setting
您可以尝试将背景图像定位在可视区域之外，例如设置
background-position: -9999px -9999px
background-position: -9999px -9999px
or something less drastic depending on the viewable area.
或者不那么激烈的东西取决于可视区域。
回答by FaJo
Create a css attribute and use toggleClass:
创建一个 css 属性并使用 toggleClass：
.class {
background-image: url(...);
}
.class.toggle {
background-image: none;
}
$('.class').toggleClass('toggle');
回答by Tomasz Golinski
background-position: -9000 -9000is best choice i think
background-position: -9000 -9000是我认为最好的选择
回答by Prokenyan
Assuming you are using javascript, you could use that to modify the properties. In the example I am posting below I am assuming you also have jQuery lib, if not a straight up DOM manipulation would also work. I am also calling the element you wish to toggle its background image input node. And finally this method uses cookies.
假设您使用的是 javascript，您可以使用它来修改属性。在我在下面发布的示例中，我假设您也有 jQuery 库，如果不是直接的 DOM 操作也可以。我还调用了您希望切换其背景图像输入节点的元素。最后这个方法使用cookies。
=>To hide
=>隐藏
setCookie(inputNode.name, $(inputNode).css("background-image"),1);
$(inputNode).css("background-image", "url()");
=>To unhide
=>取消隐藏
$(inputNode).css("background-image",getCookie(inputNode.name));
Where
在哪里
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);
}
}
}
This worked for me. Hope helps you.
这对我有用。希望能帮到你。
回答by Vian Esterhuizen
You could use background-positionand just move it out of the view of the element.
您可以使用background-position并将其移出元素的视图。
element.class{
background-position:-9999px;
}
or
或者
element.class{
background:transparent;
}
That second solution should work. I haven't tested it and I'm not sure if that qualifies as "removing it."
第二种解决方案应该有效。我还没有测试过它，我不确定这是否符合“删除它”的条件。
回答by Dustin Laine
I think the background position answers are probably the best solutions, but I wanted to throw visibility into the mix. Setting visible: hiddenwill remove it from view but keep the structure in tact.
我认为背景位置的答案可能是最好的解决方案，但我想提高可见性。设置visible: hidden会将其从视图中删除，但保持结构完好无损。
回答by rasx
One twist on retro web design is to use the classic spacer.gifto replace/hide your background image. Recall that spacer.gif was usedas a way to layout a grid system (with tables) back in the early (horrible) days of CSS. It is a one-pixel image with one transparent pixel.
复古网页设计的一个转折是使用经典spacer.gif来替换/隐藏您的背景图像。回想一下，在 CSS 的早期（可怕的）时代，spacer.gif 被用作布局网格系统（带有表格）的一种方式。它是一个具有一个透明像素的单像素图像。
You can use spacer.gif in the 21st century like this:
你可以像这样在 21 世纪使用 separator.gif：
#ImageBox
{
background: url(../images/my-regular-background.png) no-repeat center center;
&.ImageLoaded
{
background-image: url(../images/spacer.gif);
}
}
回答by alfadog67
Just to add to the mix, you can place 2 images in the style property, and when you want to hide one, simply change the order of them in the property. This will meet the needs of not manipulating the image.
只是为了添加混合，您可以在 style 属性中放置 2 张图像，当您想隐藏其中一张时，只需更改它们在属性中的顺序即可。这将满足不操纵图像的需要。
Your hider.gif can be a single pixel or a completely different image altogether.
您的 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>
I haven't checked this code for bugs, so buyer beware ;-)
我还没有检查这个代码的错误，所以买家要当心;-)
