анимированный фон покрывает весь мой текст - PullRequest
Новая
       50

анимированный фон покрывает весь мой текст

0 голосов
/ 02 ноября 2018

мой код: Итак, я работаю над личным проектом, и я нашел этот анимированный фон, который идеально подходит для него из 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 голосов
/ 02 ноября 2018

Добро пожаловать в stackoverlfow. Я вижу, вы пытались использовать z-index на .expo и heading. Но сейчас я не могу вспомнить, работает ли z-index для позиции: относительная;

Решение: 

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

Эти модификации z-index должны работать, потому что вы используете position:absolute; для этих классов

0 голосов
/ 02 ноября 2018 

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