CSS不能隱藏背景

我想隱藏身體，直到頁面加載，但是，當身體的背景圖像開始加載它時忽略顯示：無我已經爲身體設置並反正顯示它。CSS不能隱藏背景

身體CSS

body { 

    background-image: url("../img/backgrounds/authentication/main.jpg"); 

}

身體HTML：

<body style="display: none;">

來源

2017-06-18 Jesse Schokker

你可以嘗試賦予body height = 0，並且比像'document.onload = function（）{body.style.height =「100％」};' – derHugo

這樣的onload函數獲得更好的答案，可以獲得一個jsfiddle。 – jack

你可以嘗試使身體得到高度= 0且小於做一個onload函數像

document.onload=function(){ body.style.height="100%"};

如果你有興趣也可以給jQuery和fadeIn fadeOut fu nction一個鏡頭;）

來源

2017-06-18 09:26:07 derHugo

似乎並沒有完全加載圖像的全高度，由於某種原因 –

JM你可以添加截圖和更多關於你的html結構的細節嗎？也許你還必須在css中設置背景大小 – derHugo

如果<html>元素沒有background連接到它時，文檔的background將採取從<body>元件代替。

默認情況下，<html>元素沒有連接到background。因此，當您設置style="display:none;"時，HTML元素將需要一些背景渲染到屏幕上，因此將以<body>元素的背景爲。

一個簡單的解決方案是設置<html>元件的background-color是某種顏色，是不透明（即默認的「顏色」）。 Here is a jsfiddle demonstrating this.（只需在html代碼中刪除display: none以顯示圖像）

希望這對我有所幫助。 :)

來源

2017-06-18 09:39:07

這不完全是我正在尋找的東西，它有點黑客。但感謝您的輸入任何方式 –

沒問題！ :)然後你可以創建一個onload函數或者一個簡單的JavaScript文件，當文檔準備就緒時執行，這會改變'display'屬性。或者，你可以使用'opacity'屬性，它更適合轉換（它們幾乎是相同的屬性，因爲'body'元素是一個「root」元素）:) –

請按照此：「https://www.sitepoint.com/community/t/load-background-image-after-content-loads/240343/3」，也「https://varvy.com/pagespeed/defer-images.html」可能會解決您的問題。

否則只需在您的CSS中添加以下內容。

body { 
    background-color: #eee; 
} 
body:after { 
    content:""; 
    background: url(http://yourimage-url.jpg) no-repeat 0 0; 
    background-size: cover; 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    opacity:0; 
    z-index:-1; 
    animation:bgFade 2s 2s forwards; 
} 
@keyframes bgFade { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
}

來源

2017-06-18 10:11:46 munaz

在你的HTML，給屬性hidden身體。

<body hidden> 

</body>

此外，還要確保你的HTML是正確的（所有的標籤都完全閉合），並且一切都是體內。

來源

2017-06-18 12:28:56 jack

CSS不能隱藏背景

回答

相關問題