背景淡入淡出

我試圖讓我的背景在進入網站時消失。我已經嘗試了幾種可行的方法。但是，我只是在以不同的分辨率爲中心背景時遇到問題。正如您在進入我的網站時可以看到的那樣，每當您調整瀏覽器的大小時，背景總是處於中間位置。網站：http://studi0.ml/這正是我想要實現的，但仍然有地球在任何時候都處於中間位置。我的背景是純粹的CSS。請記住，我剛開始網站設計。我一直在嘗試編碼2-3周。背景淡入淡出

html, 
 
body { 
 
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    -webkit-transition: background 0.0s linear; 
 
    -moz-transition: background 0.75s 0.0s linear; 
 
    -o-transition: background 0.75s 0.0s linear; 
 
    transition: background 0.75s 0.0s linear; 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
}

來源

2016-05-07 azuz53487

我不明白問題，因爲地球上的圖像，是不是？ – phpheini

是的，地球儀在圖像上。但是，在某些代碼中，無論您何時調整瀏覽器大小，全局都會向右移動。如果您例如點擊我的網站，並嘗試調整瀏覽器大小，則可以看到整個背景根據瀏覽器大小移動。 - 對不起，如果我沒有解釋得很好，盡我所能。 – azuz53487

好的或者不好的行爲的截圖以及photoshop中的想要的結果都會幫助我們理解。 –

如果你想有一個背景圖像淡入在頁面加載我會推薦不同的設置。您可以在不同於您網頁其他頁面的流程中使用單獨的div，並使其在頁面加載時具有不透明度爲1的動畫效果。

HTML

<html> 
<head> ... </head> 
<body> 
    <div class="page-bg"></div> 
</body> 
</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
} 

body { 
    position: relative; 
} 

.page-bg { 
    opacity: 0; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed; 
    background-size: cover; 

    animation-name: fadeIn; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-duration: 1s; 
    animation-fill-mode:forwards; 
} 

@keyframes fadeIn { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
}

當然，你可能需要添加polyfills爲animation和keyframes聲明。 （即-moz-animation-name，-webkit-animation-name，等等。）

這裏是關於Plunkr的工作示例。我必須將您使用的圖像與https鏈接交換，以便加載它時不會出現問題。

來源

2016-05-07 16:44:58 ManBearPixel

非常感謝你的先生！這正是我期待的！非常感激！ – azuz53487

沒問題的隊友！ – ManBearPixel

一個問題，先生。我想知道如何讓顏色變黑？我試過這樣做：背景：＃000 url（http://studi0.ml/EzJsucI.jpg）無重複中心中心固定; - 然而，沒有結果:) 謝謝！ – azuz53487

背景淡入淡出

回答

相關問題