隐藏而不移除背景图像

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

来源

2011-05-06 student

你可以尝试定位背景图像的可视区域之外，如设置

background-position: -9999px -9999px

什么的那么激烈取决于可视区域。

来源

2011-05-06 16:07:57

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

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

或

element.class{ 
    background:transparent; 
}

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

来源

2011-05-06 16:08:04

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

来源

2011-05-06 16:09:51

他要求的只是一个背景图像解决方案。这将隐藏整个元素。 – 2011-05-06 16:11:45

而且？没有看到他的标记，他可能没有内容，这是完全可行的选择。 – 2011-05-06 16:14:27

“我可以使用什么背景属性来实现这一目标？”......“将背景图像隐藏在CSS中”很明显，他正在寻找纯粹的背景解决方案。这个答案对于这种情况没有用处。 – 2011-05-06 16:16:59

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

来源

2011-05-06 16:12:03

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

=>要隐藏

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

这为我工作。希望可以帮助你。

来源

2012-11-13 20:12:27 Prokenyan

复古网页设计的一个扭曲就是用经典的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); 
    } 
}

来源

2012-12-13 21:17:54 rasx

正好遇到同样的问题。我使用：

background-size: 0 0;

我认为这是一个有点比使用一些huuuuge负值为background-position友好。

来源

2014-09-28 07:39:52

要添加到此，您还可以使用background-size取消隐藏背景：auto – 2015-10-19 16:48:21

谢谢！伟大的伎俩，完美的为我工作。 – 2015-12-22 04:47:29

非常适合我，谢谢！ – 2017-10-25 10:53:19

创建CSS属性和使用toggleClass：

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

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

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

来源

2015-01-09 07:39:56 FaJo

只是为了加进来，你可以放置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>

我没有检查这个错误代码，所以买方小心;-)

来源

2017-05-08 15:49:59 alfadog67

隐藏而不移除背景图像

回答

相关问题