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 - 制作动画背景的内容

回答

相关问题