blocks|key|690652|text|您可以尝试将背景图像定位在可视区域之外，如设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|690653|background-position:+-9999px+-9999px|offset|length|style|CODE|690654|或者根据可见区域的不同而不太激烈。|690655|entityMap^0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

You could try positioning the background image outside of the viewable area, like setting

<code>background-position: -9999px -9999px</code>

or something less drastic depending on the viewable area.

blocks|key|906935|text|您可以使用background-position并将其移出元素的视图。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|906936|element.class{
++background-position:-9999px;
}|code-block|syntax|javascript|906937|或|906938|element.class{
++background:transparent;
}|906939|第二种解决方案应该是可行的。我还没有测试过它，我不确定这是否符合“移除它”的要求。|906940|entityMap^0|5|J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

You could use <code>background-position</code> and just move it out of the view of the element.

<pre><code>element.class{
 background-position:-9999px;
}
</code></pre>

or 

<pre><code>element.class{
 background:transparent;
}
</code></pre>

That second solution should work. I haven't tested it and I'm not sure if that qualifies as "removing it."

blocks|key|906983|text|我认为背景位置答案可能是最好的解决方案，但我想在混合中加入可见性。设置visible:+hidden会将其从视图中移除，但保持结构的灵活性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|906984|entityMap^0|Z|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I think the background position answers are probably the best solutions, but I wanted to throw visibility into the mix. Setting <code>visible: hidden</code> will remove it from view but keep the structure in tact.

blocks|key|690820|text|我认为background-position:+-9000+-9000是最好的选择|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|690821|entityMap^0|3|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<code>background-position: -9000 -9000</code> is best choice i think

blocks|key|690866|text|假设你使用的是javascript，你可以用它来修改属性。在我下面发布的例子中，我假设你也有jQuery库，如果没有直接的DOM操作也可以。我还将调用您希望切换其背景图像输入节点的元素。最后，此方法使用cookies。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|690867|=>To隐藏|690868|+++setCookie(inputNode.name,+$(inputNode).css("background-image"),1);
+++$(inputNode).css("background-image",+"url()");+|code-block|syntax|javascript|690869|=>To取消隐藏|690870|$(inputNode).css("background-image",getCookie(inputNode.name));|690871|哪里|690872|function+setCookie(c_name,value,exdays)
{
var+exdate=new+Date();
exdate.setDate(exdate.getDate()+%2B+exdays);
var+c_value=escape(value)+%2B+((exdays==null)+?+""+:+";+expires="%2Bexdate.toUTCString());
document.cookie=c_name+%2B+"="+%2B+c_value;
}



function+getCookie(c_name)
+++{
++++var+i,x,y,ARRcookies=document.cookie.split(";");
++++for+(i=0;i<ARRcookies.length;i%2B%2B)
++++{
++++x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
++++y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")%2B1);
+++++x=x.replace(/%5E\s%2B%7C\s%2B$/g,"");
++++if+(x==c_name)
++++{
++++return+unescape(y);
++++}
+++++}
++++}|690873|这对我很有效。希望能帮到你。|690874|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

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

<pre><code> setCookie(inputNode.name, $(inputNode).css("background-image"),1);
 $(inputNode).css("background-image", "url()"); 
</code></pre>

=>To unhide

<pre><code>$(inputNode).css("background-image",getCookie(inputNode.name));
</code></pre>

Where

<pre><code>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&lt;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);
 }
 }
 }
</code></pre>

This worked for me. Hope helps you.

blocks|key|907129|text|复古网页设计的一个特点是使用经典的spacer.gif来替换/隐藏你的背景图像。回想一下，在CSS的早期(可怕的)时代，spacer.gif+was+used是一种布局网格系统(带有表)的方法。它是一个带有一个透明像素的单像素图像。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|907130|你可以像这样在21世纪使用spacer.gif：|907131|#ImageBox
{
++++background:+url(../images/my-regular-background.png)+no-repeat+center+center;

++++&.ImageLoaded
++++{
++++++++background-image:+url(../images/spacer.gif);
++++}
}|code-block|syntax|javascript|907132|entityMap|0|LINK|mutability|MUTABLE|url|http://www.windyweb.com/html_tips.htm^0|H|A|1O|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

One twist on retro web design is to use the classic <code>spacer.gif</code> to replace/hide your background image. Recall that <a href="http://www.windyweb.com/html_tips.htm" rel="nofollow">spacer.gif was used</a> 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:

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

 &amp;.ImageLoaded
 {
 background-image: url(../images/spacer.gif);
 }
}
</code></pre>

blocks|key|690947|text|创建css属性并使用toggleClass：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|690948|.class+{
++background-image:+url(...);
}

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

$('.class').toggleClass('toggle');|code-block|syntax|javascript|690949|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Create a css attribute and use toggleClass:

<pre><code>.class {
 background-image: url(...);
}

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

$('.class').toggleClass('toggle');
</code></pre>

blocks|key|691029|text|为了增加混合效果，您可以在style属性中放置2个图像，当您想隐藏一个图像时，只需更改它们在属性中的顺序即可。这将满足不对图像进行操作的需要。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|691030|您的hider.gif可以是单个像素，也可以是完全不同的图像。|691031|<!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>|code-block|syntax|javascript|691032|我还没有检查这段代码中的错误，所以买家要当心;-)|691033|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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.

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt; 
bg_hidden {
 background-image: url(hider.gif), url(realImage.jpg);

}
bg_shown {
 background-image: url(realImage.jpg), url(hider.gif);
 background-repeat: repeat, repeat;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="bg_shown"&gt;
&lt;button onclick="this.parent.className='bg_hidden'"&gt;Hide BG&lt;/button&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

I haven't checked this code for bugs, so buyer beware ;-)

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.

Hide without removing background image

jQuery

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

问隐藏而不删除背景图像
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏而不删除背景图像EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏而不删除背景图像
EN