在css中使用javascript文件作为背景_Javascript_Html_Css

在css中使用javascript文件作为背景

javascript html css

在css中使用javascript文件作为背景,javascript,html,css,Javascript,Html,Css,我知道我可以使用css中的background image:url（“www.linktoimage.com/image.png”）将图像放置在背景中。我还知道我可以使用标记将javascript文件添加到html中。我的挑战是如何将背景图像的css特征应用于javascript文件为了添加一些上下文，javascript文件是一个简单的动画（随机弹起的球，响应屏幕宽度和高度。我想将文本放在这上面，就像它是背景一样，但无论我做什么，文本都会将自己放在脚本上方的白色框中，而不是直接放在脚本上方。

我知道我可以使用css中的background image:url（“www.linktoimage.com/image.png”）将图像放置在背景中。我还知道我可以使用标记将javascript文件添加到html中。我的挑战是如何将背景图像的css特征应用于javascript文件

为了添加一些上下文，javascript文件是一个简单的动画（随机弹起的球，响应屏幕宽度和高度。我想将文本放在这上面，就像它是背景一样，但无论我做什么，文本都会将自己放在脚本上方的白色框中，而不是直接放在脚本上方。下面是我各种尝试的一般结果：

我想将“Welcome”放在javascript的顶部，这与当前它在白色背景窗口顶部的显示方式相反。我的css如下所示：

@font-face {
  font-family:'HighTide';
  src: url('assets/HighTide.otf')

  font-family:'HighTideSans';
  src: url('assets/HighTideSans.otf')

}

body {
  padding: 0;
  margin: 0;
}

canvas {
  vertical-align: top;
  z-index: -1
}

.title {
  font-family:'HighTide';
  font-size: 10vw;
  margin: auto;
  text-align: center;
  z-index: 1;
}

.enter {
  font-family:'HighTideSans';
  font-size: 2vw;
  text-align: center;
  margin: auto;
  z-index: 1;  
}

以下是html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>LockeDesign</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>
    <script src="libraries/svg.js" type="text/javascript"></script>

    <script src="main.js" type="text/javascript"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class=title> WELCOME </div>
    <a href="main.html" class=enter> </a>
  </body>
</html>


锁定设计
欢迎

任何建议都将不胜感激，谢谢

编辑

使用position:absolute；部分有效，我所要做的就是添加left:0；

右：0；下：50%；以重新居中文本。调整窗口大小会导致滚动条出现，这不太理想，因此我在body标记中添加了overflow:hidden；。现在这完全符合预期，谢谢大家！

我建议包装希望在动态背景中显示的所有内容单曲
范例

<html> <body> <div id="BodyWrapper"> <h1> This is an HTML Page </h1> </div> </body> </html>
如果以上仍然不够，那么您可能不得不推迟显示正文内容（确保动态背景首先完全加载）
可以将包装的初始显示样式设置为

#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
和onLoad…调用这个函数

function show_PageBody() { setTimeout(function(){ update_Wrapper(); },1000); function update_Wrapper() { document.getElementById('BodyWrapper').style.display='block'; document.getElementById('BodyWrapper').style.zIndex = 5; } }
您可以为BodyWrapper的不透明度添加css转换，使其在屏幕上淡入淡出，而不只是出现
这应该管用（在过去对我管用）。
如果没有，请告诉我。
使用
位置：绝对；
部分工作，并呈现此结果：

我所要做的就是添加
left:0；right:0；bottom:50%；
以重新居中文本。此外，调整窗口大小会导致出现滚动条，这不太理想，因此我在body标记中添加了
overflow:hidden；
。现在这完全符合预期：

您尝试过position:absolute吗？这有效了，请看我的编辑，谢谢！@Arkadelic如果您不喜欢滚动条，但仍希望保持页面内容可滚动，则可以将其添加到CSS:：-webkit滚动条{-webkit外观：无；宽度：0px；高度：0；}@ReallyNiceCode对于这个特定的页面，我不需要滚动，但是在进一步的开发中，我可能会很好地使用它，所以谢谢你！我也尝试过这个，它很有效，但是只使用了几行CSS，我就能够达到同样的效果（见编辑），虽然您的方法可能更稳定。@Arkadelic Ok coolz…是的，我的延迟方法对于可能导致意外结果的超慢加载时间起到故障保护的作用。
function show_PageBody() { setTimeout(function(){ update_Wrapper(); },1000); function update_Wrapper() { document.getElementById('BodyWrapper').style.display='block'; document.getElementById('BodyWrapper').style.zIndex = 5; } }