CSS动画DIV作为背景，顶部有透明的BG Div内容

Question

我一直在尝试在CSS动画星空之上放置一些bootstrap/html/css作为背景。

似乎在网上突出的一种方法是制作 1x1 像素的 png。我希望有一种方法可以透明地编码。

背景：RGBA - 玩阿尔法不起作用。不透明度：0也不起作用。上述 z-index：-1 也不起作用。

我已经摆弄了一段时间了。这是代码笔。http://s.codepen.io/awaybackhome/debug/QdqNNX

理想情况下，我希望看到星星通过包含文本的 Div、引号框左侧的 Div（列）和包含按钮的 Div。相反，我只是得到黑色背景。

Answer 1

根据我的经验，这是相当简单的代码，但最初有点扭曲。从背景<div>开始。给它一个与星场背景顶部的位置相关的id或class。现在，在您的 CSS 中通过设置 background-color: transparent; 来引用新<div>。这实际上使其成为您可以在其上输出的不可见层。接下来，将您的内容放入新的<div>层中。HTML 应如下所示：

 <div id="starFieldBackground">
     <div id="background">
         <p>Your Code Here</p>
     </div>
 </div>

还有你的 CSS：

 #background {
     background-color:transparent;
 }

请务必设置 <div id="background"> 的width和height。这也可以通过使用更多代码进行z-index定位来实现。

编辑：对background-color属性的引用。

http://www.w3schools.com/cssref/pr_background-color.asp