CSS - 製作動畫背景的內容

我有一個來自Codepen的動畫背景（下面的鏈接）但是我無法讓我的文本浮動在背景的前面。因爲我不認爲這將有助於CSS - 製作動畫背景的內容

Codepen我沒有包括JS：https://codepen.io/zessx/pen/ZGBMXZ

截圖：https://gyazo.com/37568fdb9681e4c9d67d4d88fc7658ba

我一直在使用的z-index和使用心不是幫助是絕對位置嘗試。

Index.html注：我已刪除的代碼是無關緊要的

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/style.css"> 
     <script type="text/javascript" src="js/index.js"></script> 
    </head> 

    <body> 
     <div id="bg"></div> 

     <div class="content w3-content" style="width: 80%;margin-left: 10%;"> 
      <h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1> 
     </div> 

    </body> 

</html>

style.css

.bg { 
    z-index: 1; 
    background: -webkit-radial-gradient(center ellipse, #721B94 0%, #210627 100%) no-repeat center center fixed; 
    background: radial-gradient(ellipse at center, #721B94 0%, #210627 100%); 
    overflow: hidden; 
    } 

body { 
    margin: 0; 
} 

.content { 
    position: absolute; 
    z-index: 100; 
    overflow: hidden; 
}

來源

2017-06-14 Tomas Crofty

我看不到你的'.content'格當我查看codepen的來源。 – WizardCoder

對不起，我沒有解釋，我使用的codepen代碼，codepen是我的代碼 –

沒問題。 Joseph Marikle已經回答了你的問題，並且我已經添加了一個codepen作爲對該答案的評論，以幫助你理解問題。 https://stackoverflow.com/a/44553245/8085668。 – WizardCoder

文本容器的固定位置將解決此問題。

<div class="content w3-content" style="width: 80%;margin-left: 10%; position : fixed"> 
     <h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1> 
    </div>

我有工作plunker這裏[link]

來源

2017-06-14 19:38:52

只是爲了記錄，這也可以用'position：absolute'。主要問題是元素在屏幕上的位置沒有被指定。在這個例子中，不是指定'.content'元素的位置，而是將'.content' HTML移動到了'.bg' HTML之上。 – WizardCoder

position: absolute應該在大多數情況下top，bottom，left，和/或right配對。您缺少top:0或類似信息。你不應該改變z-index。 .content後來在DOM中出現，所以它會在#bg之上被「繪製」。

來源

2017-06-14 19:32:52

約瑟夫打敗了我，所以這是他們正在談論的代碼。 https://codepen.io/anon/pen/gRwddm。我剛剛添加了正確的位置CSS來居中文本。由於上面答案中列出的原因，文本基本上不在屏幕上。 – WizardCoder

首先放置html文本，bg放在最後。將position: fixed;附加到文本容器。

來源

2017-06-14 19:33:11

CSS - 製作動畫背景的內容

回答

相關問題