文章/答案/技术大牛

发布

社区首页 >问答首页 >带有Html文本的JS背景

问带有Html文本的JS背景
EN

Stack Overflow用户

提问于 2022-08-11 07:21:26

回答 1查看 57关注 0票数 0

我已经找到了一个js背景，现在我希望在我所有的php文件中都有这个背景。

问题是html代码要么在js下，要么在js后面。我怎么才能解决这个问题？

JS文件：

<!DOCTYPE html>

<html>

  <head>

    <meta name = "viewport" content = "width=device-width">
    <title>StarField</title>

    <style>

      * { margin:0; padding:0; }

      html, body { width:100%; height:100%; }

      canvas { height:10%;  width:100%; }

     
    </style>

  </head>

  <body>

    <canvas></canvas>

    <script type = "text/javascript">

      const Star = function(x, y, z) {

        this.x = x; this.y = y; this.z = z;

        this.size = 25;

      };

      var context = document.querySelector("canvas").getContext("2d");

      var height = document.documentElement.clientHeight;
      var width  = document.documentElement.clientWidth;

      var stars = new Array();

      var max_depth = 7500;

      for(let index = 0; index < 200; index ++) stars[index] = new Star(Math.random() * width, Math.random() * height, index * (max_depth / 200));

      function loop() {

        window.requestAnimationFrame(loop);

        height = document.documentElement.clientHeight;
        width  = document.documentElement.clientWidth;

        context.canvas.height = height;
        context.canvas.width  = width;

        context.fillStyle = "#000000";
        context.fillRect(0, 0, width, height);

        for (let index = stars.length - 1; index > -1; index --) {

          let star = stars[index];

          star.z -= 5;

          if (star.z < 0) {

            stars.push(stars.splice(index, 1)[0]);
            star.z = max_depth;
            continue;

          }

          let translate_x = width * 0.5;
          let translate_y = height * 0.5;

          let field_of_view = (height + width) * 0.5;

          let star_x = (star.x - translate_x) / (star.z / field_of_view) + translate_x;
          let star_y = (star.y - translate_y) / (star.z / field_of_view) + translate_y;

          let scale = field_of_view / (field_of_view + star.z);

          let color = Math.floor(scale * 256);

          context.fillStyle = "rgb(" + color + "," + color + "," + color + ")";
          context.fillRect(star_x, star_y, star.size * scale, star.size * scale);

        }

      }

      loop();

    </script>

  </body>

</html>

另一个Php文件，其中包括js：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="feedback.css">
    <script src="https://kit.fontawesome.com/74d89d956b.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback</title>
</head>
<body>

   <?php include "navbar.php" ?> 
   <?php include "background.php" ?> 
<div class="title">
    <h1>Thank you for being here!All suggestions are welcome.</h1>
</div>

<div class = "container">
<div class="star">
        <input type = "radio" name="rate" id="rate-5">
        <label for="rate-5" class="fa fa-star"></label>
        <input type = "radio" name="rate" id="rate-4">
        <label for="rate-4"class="fa fa-star"></label>
        <input type = "radio" name="rate" id="rate-3">
        <label for="rate-3"class="fa fa-star"></label>
        <input type = "radio" name="rate" id="rate-2">
        <label for="rate-2"class="fa fa-star"></label>
        <input type = "radio" name="rate" id="rate-1">
        <label for="rate-1"class="fa fa-star"></label>

        <form action = "feedbackform.php" method="post">
    <header></header>
    <div class="textarea">
        <textarea name="suggestion" cols="30" placeholder="What's your opinion about my cv?"></textarea>
    </div>
    <div class="btn">
        <button type="submit">Post</button>
    </div>

</form>
</div>
</div>
</form>
</body>
</html>

用于Php文件的Css：

.title{
    text-align: center;

}
.title

    {
        text-transform: uppercase;
       background-image: linear-gradient(
        -225deg,
        #231557 90%,
        
        #ff1361 67%,
        #fff800 100%
      );
       background-size: auto auto;
       background-clip:border-box;
       background-size:20% auto;
       color:#fff;
       -webkit-text-fill-color: transparent;
       -webkit-background-clip: text;
       -webkit-text-fill-color:transparent;
       animation:textclip  2s linear infinite;
       
       
     }
     @keyframes textclip {
        to {
          background-position: 520% center;
        }
      }
    
      
  .container{
    
    text-align: center;
    width: 390px;
    height: 350px;
    margin-top: 250px;
    margin-left:750px;
    background-color: rgb(26, 24, 24);
    border: 1px solid #231557;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    
    
  }
  body{
   
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}
  .container > .star input{
    display: none;
  }

  .star label{
    font-size: 30px;
    float: right;
    padding: 15px;
    color:gray;
    transition: width 2s;
    margin-top: -20px;
  }

  input:not(:checked) ~ label:hover,
  input:not(:checked) ~ label:hover ~ label{
    color:yellow;
  }
  input:checked ~ label{
    color:yellow;
  }

  input#rate-5:checked ~label{
    color:#fe7;
    text-shadow: 0px 0px 10px rgb(255, 255, 2);

  }
  .textarea textarea:focus{
    border-color: #444;
  }
 
 
  #rate-1:checked ~ form header:before{
    content: "Bleah";
  }
  #rate-2:checked ~ form header:before{
    content: "Nope";
  }
  #rate-3:checked ~ form header:before{
    content: "Ok ";
  }
  #rate-4:checked ~ form header:before{
    content: "Awesome ";
  }
  #rate-5:checked ~ form header:before{
    content: "Magnificent ";
  }
 
  input:checked ~ form{
    display: block;
  }
  form header{
    margin-left: 5px;
    margin-top: 50px;
    font-size:large;
    color:yellow;
    text-align: center;
  transition: all 0.2s ease;
  text-transform:uppercase;
  }


  form .textarea{
    margin-top: 5px;
    margin-left: 25px;
    
    
  }
  form .textarea textarea{
    resize: none;
    margin-top: 20px;
    margin-left: -30px;
    background:#BEBEBE;
    color:white;
    resize: none !important;
    height: 50px;
    width: 300px;
    
  }
  
  .btn{
    margin-top: 10px;
    margin-left: -2px;
    width: 100%;
  }
  .btn button{
    width: 310px;
    height: 30px;
    background-color:#BEBEBE;
    text-transform: uppercase;
    font-style: italic;
    cursor: pointer;
    transition: ease 1s;
  }

  .btn button:hover{
    background-color: rgb(129, 118, 118);
  }

javascript

php

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-11 08:15:59

目前，“画”星星的洞穴有默认的定位。因此，在本例中，它位于主HTML之前。

如果您想要将其作为涵盖整个视图的背景，那么有几件事情必须改变：

高度需要达到100%
，定位需要固定(从左上角开始在视窗中固定)，z索引降低，因此低于后续的HTML.

。

在background.php文件中，将画布的样式更改为：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73316735

复制

相似问题

问带有Html文本的JS背景
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有Html文本的JS背景EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有Html文本的JS背景
EN