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

【问题标题】：CSS animated DIV as background with transparent BG Div with content on topCSS 动画 DIV 作为背景，透明 BG Div 顶部有内容
【发布时间】：2017-02-03 14:32:40
【问题描述】：

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

一种似乎在网上很流行的方法是制作一个 1x1 像素的 png。我希望有一种方法可以以透明方式进行编码。

背景：rgba - 玩 alpha 不起作用。 opacity:0 也不起作用。 z-index:-1 上面的也不起作用。

我一直在摆弄它。这是代码笔。 http://s.codepen.io/awaybackhome/debug/QdqNNX

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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

【讨论】：

我试了一下，但似乎没有成功。我还尝试将透明放在每个星空 div 上。然后我试着把它放在 Starfields 顶部的 Div 上。然后我将 Div 更改为一个简单的 h1 标签，看看它是否会显示出来。