Question

嘿，我遇到了一个让我烦恼的问题。我为firefox做了一个自定义主页，为我最喜欢的网站提供了一些基本的html和bootstrap 我遇到了p5库（非常酷的视觉效果），现在我有一个很好的循环动画，我想把它设置为我的主页的背景。我尝试了一些div技术和一些css操作但没有成功。有什么建议吗？

[HTML]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Purple Rain</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href='style.css'>
    <script src="p5.js" type="text/javascript"></script>
    <script src="p5.dom.js" type="text/javascript"></script>
    <script src="p5.sound.js" type="text/javascript"></script>
    <script src="terrain.js" type="text/javascript"></script>

  </head>
    <body>
      <div class = "container-fluid">
        <aside>
          <article>
            <ul><h3>Reddit</h3>
              <redditbutton><a href="https://www.reddit.com">Reddit</a></redditbutton>
              <redditbutton><a href="https://www.reddit.com/r/documentaries">Documentaries</a></redditbutton>
              <redditbutton><a href="https://www.reddit.com/r/historyporn">History Porn</a></redditbutton>
              <redditbutton><a href="https://www.reddit.com/r/learnprogramming">Learn Programming</a></redditbutton>
              <redditbutton><a href="https://www.reddit.com/r/lofihiphop">lofihiphop</a></redditbutton>
              <redditbutton><a href="https://www.reddit.com/r/unixporn">UnixPorn</a></redditbutton>
              </ul>

          </aside>
        </ul>
      </article>
    </div>
  </body>
</html>

[CSS]

  body{
    /*background-image: url("planet.gif");
    background-repeat:no-repeat;
    background-size:1440px;
    animation-name: diagonal-slide;*/
  }

  redditbutton{
    background-color: #e02c2c;
    border-radius: 15px;
    border: none;
    color: white;
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 8px;

  }

  article{
    background-repeat: no-repeat;
    align-content: center;
  }

  ul {
    font-family: monospace;
    padding-left: none;
  }

  h3 {
    font-family: monospace;
    font-size: 12px;
  }

  a:link {
    color: white;
    background-color: transparent;
  }

  a:visited{
    color:white;
  }

  aside{
    padding-left: 0px;

  }

[P5 / JAVASCRIPT]

// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/IKB1hWWedMk

// Edited by SacrificeProductions

var cols, rows;
var scl = 20;
var w = 1400;
var h = 1000;

var flying = 0;

var terrain = [];

function setup() {
  createCanvas(900, 500, WEBGL);
  cols = w / scl;
  rows = h/ scl;

  for (var x = 0; x < cols; x++) {
    terrain[x] = [];
    for (var y = 0; y < rows; y++) {
      terrain[x][y] = 0; //specify a default value for now
    }
  }
}

function draw() {

  flying -= 0.1;
  var yoff = flying;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
      xoff += 0.2;
    }
    yoff += 0.2;
  }


  background(0);
  translate(0, 50);
  rotateX(-PI/3);
  fill(200,200,200, 150);
  translate(-w/2, -h/2);
  for (var y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (var x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, terrain[x][y]);
      vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
    }
    endShape();
  }
}

Answer 1

你能做到，修复动画的div容器，使用z-index将其设置在任何背后，只需确保其上方任何元素的背景是透明的

.divclass{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

如何将JS文件作为网站的背景？

1 个答案: