Hide without removing background image
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 backgr开发者_如何学编程ound 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.
Just met the same problem. I use:
background-size: 0 0;
I think it's a little bit friendlier than using some huuuuge negative values for background-position.
You could try positioning the background image outside of the viewable area, like setting
background-position: -9999px -9999px
or something less drastic depending on the viewable area.
Create a css attribute and use toggleClass:
.class {
background-image: url(...);
}
.class.toggle {
background-image: none;
}
$('.class').toggleClass('toggle');
background-position: -9000 -9000 is best choice i think
You could use background-position and just move it out of the view of the element.
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."
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.
=>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.
I think the background position answers are probably the best solutions, but I wanted to throw visibility into the mix. Setting visible: hidden will remove it from view but keep the structure in tact.
One twist on retro web design is to use the classic spacer.gif to replace/hide your background image. Recall that spacer.gif was used as 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.
You can use spacer.gif in the 21st century like this:
#ImageBox
{
background: url(../images/my-regular-background.png) no-repeat center center;
&.ImageLoaded
{
background-image: url(../images/spacer.gif);
}
}
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.
Your hider.gif can be a single pixel or a completely different image altogether.
<!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 ;-)
加载中,请稍侯......
精彩评论