动画背景覆盖了我所有的文字

Question

我的代码：所以我正在做一个个人项目，我从 codepen 找到了这个非常适合它的动画背景，它不会让我看到任何我想输入的标题或文本。我想要这个背景在后台，并且能够在上面写我的网站。非常感谢您的帮助这是我第一次使用这个网站！

* {
    margin: 0;
    padding: 0;
}
.expo { 
 width: 200px;
 height: 200px;
 z-index: 1;
 background: white;
}

h1{  
  font-family: sans-serif;
  font-size: 50px;
  color: white;
  z-index: 2;
}

/* Stars */
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}


.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:1200px;
  display:block;
}

.stars {
  background:rgba(0, 0, 0, 1) url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 400s linear infinite;
  -ms-animation:move-twink-back 400s linear infinite;
  -o-animation:move-twink-back 400s linear infinite;
  -webkit-animation:move-twink-back 400s linear infinite;
  animation:move-twink-back 400s linear infinite;
}




/* email */
.container {
 max-width:400px;
 width:100%;
 margin:0 auto;
 position:relative;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
 background:#F9F9F9;
 padding:25px;
 margin:50px 0;
}

#contact h3 {
 color: #000000;
 display: block;
 font-size: 30px;
 font-weight: 400;
}

#contact h4 {
 margin:5px 0 15px;
 display:block;
 font-size:13px;
}

fieldset {
 border: medium none !important;
 margin: 0 -10px 10px;
 min-width: 100%;
 padding: 0;
 width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
 width:100%;
 border:1px solid #CCC;
 background:#FFF;
 margin:0 0 5px;
 padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
 -webkit-transition:border-color 0.3s ease-in-out;
 -moz-transition:border-color 0.3s ease-in-out;
 transition:border-color 0.3s ease-in-out;
 border:1px solid #AAA;
}

#contact textarea {
 height:100px;
 max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
 cursor:pointer;
 width:100%;
 border:none;
 background:#0CF;
 color:#FFF;
 margin:0 0 5px;
 padding:10px;
 font-size:15px;
}

#contact button[type="submit"]:hover {
 background:#000aff;
 -webkit-transition:background 0.3s ease-in-out;
 -moz-transition:background 0.3s ease-in-out;
 transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
 outline:0;
 border:1px solid #999;
}

<!DOCTYPE html> 
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="style.css"/>
  
 <title> Memento Mori </title> 

</head>
<body class="fade-in">
<div class"expo"> 
<h1>Memento Mori</h1>
<h2>a reminder of death</h2>
</div>


</body> 
<footer> 
 <div class="stars"></div>
 <div class="twinkling"></div>
</footer>
</html>

Answer 1

* {
    margin: 0;
    padding: 0;
}
.expo { 
 width: 200px;
 height: 80px;
 z-index: 1;
 background: white;
}

h1{  
  font-family: sans-serif;
  font-size: 50px;
  color: white;
  z-index: 2;
}

/* Stars */
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}


.stars, .twinkling {
  position:absolute;
  top:100px;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:1200px;
  display:block;
}

.stars {
  background:rgba(0, 0, 0, 1) url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 400s linear infinite;
  -ms-animation:move-twink-back 400s linear infinite;
  -o-animation:move-twink-back 400s linear infinite;
  -webkit-animation:move-twink-back 400s linear infinite;
  animation:move-twink-back 400s linear infinite;
}




/* email */
.container {
 max-width:400px;
 width:100%;
 margin:0 auto;
 position:relative;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
 background:#F9F9F9;
 padding:25px;
 margin:50px 0;
}

#contact h3 {
 color: #000000;
 display: block;
 font-size: 30px;
 font-weight: 400;
}

#contact h4 {
 margin:5px 0 15px;
 display:block;
 font-size:13px;
}

fieldset {
 border: medium none !important;
 margin: 0 -10px 10px;
 min-width: 100%;
 padding: 0;
 width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
 width:100%;
 border:1px solid #CCC;
 background:#FFF;
 margin:0 0 5px;
 padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
 -webkit-transition:border-color 0.3s ease-in-out;
 -moz-transition:border-color 0.3s ease-in-out;
 transition:border-color 0.3s ease-in-out;
 border:1px solid #AAA;
}

#contact textarea {
 height:100px;
 max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
 cursor:pointer;
 width:100%;
 border:none;
 background:#0CF;
 color:#FFF;
 margin:0 0 5px;
 padding:10px;
 font-size:15px;
}

#contact button[type="submit"]:hover {
 background:#000aff;
 -webkit-transition:background 0.3s ease-in-out;
 -moz-transition:background 0.3s ease-in-out;
 transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
 outline:0;
 border:1px solid #999;
}

<!DOCTYPE html> 
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="style.css"/>
  
 <title> Memento Mori </title> 

</head>
<body class="fade-in">
<div class"expo"> 
<h1>Memento Mori</h1>
<h2>a reminder of death</h2>
</div>


</body> 
<footer> 
 <div class="stars"></div>
 <div class="twinkling"></div>
</footer>
</html>

 .stars, .twinkling {
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      width:auto;
      height:1200px;
      display:block;
    }

这里你已经给出了前 0，这就是为什么它覆盖了你需要按照你的要求给出顶部的所有文本，就像我在这个片段中给出的那样

 .stars, .twinkling {
      position:absolute;
      top:100px;
      left:0;
      right:0;
      bottom:0;
      width:auto;
      height:1200px;
      display:block;
    }
hope you got your answer

Answer 2

欢迎来到 stackoverlfow。我明白了，您已经尝试在 .expo 和 heading 上使用 z-index。但我现在不记得 z-index 是否适用于 position:relative;

解决方案：

.stars {
  // background..
  z-index:-2;
}
.twinkling{
  // background..
  z-index:-1;
}

这些 z-index 修改应该有效，因为您正在为这些类

使用 position:absolute;

动画背景覆盖了我所有的文字

animated background covers all of my text

html

css

coda