stackoom
  简体   繁体   中英

animated background covers all of my text

 原文  2018-11-02 03:36:00  0   2    css/ html/ coda

Question

my code: So i am working on a personal project and i found this animated background that is perfect for it from codepen and it won't let me see any of the titles or text i want to input. I want this background in the background and be able to write my website ontop. Would greatly appreciate your help this is my first time using this site! 

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

solution1
 0  2018-11-02 03:44:56

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

here you have given top 0 thats why its covering all your text you need to give top as per your requirement like i have given in this snippet

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

solution2
 0 ACCPTED  2018-11-02 03:53:04

Welcome to stackoverlfow. I see, you've tried using z-index on .expo and heading . But I can't remember now if z-index works on position:relative;

Solution:

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

These z-index modification should work, because you are using position:absolute; for these classes

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how can I make my animated image cover all background? css background image covers header and text White border around text covers background color Clear text on top of an overlay that covers a background image? Putting animated text in the background with CSS? Fade text when background behind text is animated Full screen background video that covers all available space css background covers images WHY my animated text are not coming on one line Section background color covers row
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM