隱藏而不移除背景圖像

有沒有辦法隱藏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

隱藏而不移除背景圖像

回答

相關問題