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

时间：2018-11-02 03:36:00

标签： html css html5 coda

我的代码：所以我正在一个个人项目上，我从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>

2 个答案:

答案 0 :(得分：0)

* {
    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

答案 1 :(得分：0)

欢迎来到stackoverlfow。 我知道，您已经尝试在.expo和heading上使用z-index。但是我现在不记得z-index是否可以在position：relative;

解决方案：

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

这些z-index修改应该可以工作，因为您将position:absolute;用于这些类

相关问题
最新问题