着陆页画布/徽标覆盖

Question

I have a logo in a folder that I need to overlay over the matrix canvas/background.我在文件夹中有一个徽标，我需要将其覆盖在矩阵画布/背景上。 The bottom snippet is the logo PNG file with location.底部片段是带有位置的徽标 PNG 文件。 It just does not seem to come up.它似乎没有出现。 I have added the image with a border at 0, but it leaves a black empty block across the top.我添加了边框为 0 的图像，但它在顶部留下了一个黑色的空块。 I need the image to overlap the matrix code in the center of the page.我需要图像与页面中心的矩阵代码重叠。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CybernetiX Corp</title> <style> /*basic reset */ *{ margin: 0; padding: 0; } /* Page settings */ html { width: 100%; height: 100%; background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat; overflow-x: hidden; overflow-y: hidden; } body { text-align: center; display: table; background: black; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; } canvas {display:block;} #author { position: absolute; bottom: 10px; left: 10px; color : #0F0; z-index : 1; box-sizing: border-box; vertical-align: middle; } span { font-family: monospace; font-size: 1.5em; } span:after { content:"CybernetiX-S3C"; opacity: 0; animation: cursor 1s infinite; } @keyframes cursor { 0% { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <img src="img/LOGO.png" alt="CybernetiX-Corp"> <body> <canvas id="c"></canvas> <span id = "author">John Modica @ </span> <script> // geting canvas by id c var c = document.getElementById("c"); var ctx = c.getContext("2d"); //making the canvas full screen c.height = window.innerHeight; c.width = window.innerWidth; //chinese characters - taken from the unicode charset var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%"; //converting the string into an array of single characters matrix = matrix.split(""); var font_size = 10; var columns = c.width / font_size; //number of columns for the rain //an array of drops - one per column var drops = []; //x below is the x coordinate //1 = y co-ordinate of the drop(same for every drop initially) for(var x = 0; x < columns; x++) drops[x] = 1; //drawing the characters function draw() { //Black BG for the canvas //translucent BG to show trail ctx.fillStyle = "rgba(0, 0, 0, 0.04)"; ctx.fillRect(0, 0, c.width, c.height); ctx.fillStyle = "#0F0"; //green text ctx.font = font_size + "px arial"; //looping over drops for( var i = 0; i < drops.length; i++ ) { //a random chinese character to print var text = matrix[ Math.floor( Math.random() * matrix.length ) ]; //x = i*font_size, y = value of drops[i]*font_size ctx.fillText(text, i * font_size, drops[i] * font_size); //sending the drop back to the top randomly after it has crossed the screen //adding a randomness to the reset to make the drops scattered on the Y axis if( drops[i] * font_size > c.height && Math.random() > 0.975 ) drops[i] = 0; //incrementing Y coordinate drops[i]++; } } setInterval( draw, 35 ); </script> <p style-"text-align:center;"><img src="img/LOGO.png" alt="CybernetiX Corp"></p> </body> <body> </body> </html>

 <img src="img/LOGO.png" alt="CybernetiX-Corp">

Answer 1

Here's how you can do it.这是您如何做到的。 The main changes are.主要的变化是。

Add the following HTML to the body.将以下 HTML 添加到正文。 The wrapper around the image will be full-screen so you can align the image in the middle of it using css flex .图像周围的包装器将是全屏的，因此您可以使用 css flex将图像对齐到中间。

<div class="img-wrapper"><img src="your-image"></div>

The following CSS aligns the image in the middle of the wrapper.以下 CSS 在包装器的中间对齐图像。

.img-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

 .img-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CybernetiX Corp</title> <style> /*basic reset */ * { margin: 0; padding: 0; } /* Page settings */ html { width: 100%; height: 100%; background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat; overflow-x: hidden; overflow-y: hidden; } body { text-align: center; display: table; background: black; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; } canvas { display: block; } #author { position: absolute; bottom: 10px; left: 10px; color: #0F0; z-index: 1; box-sizing: border-box; vertical-align: middle; } span { font-family: monospace; font-size: 1.5em; } span:after { content: "CybernetiX-S3C"; opacity: 0; animation: cursor 1s infinite; } @keyframes cursor { 0% { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <canvas id="c"></canvas> <span id="author">John Modica @ </span> <script> // geting canvas by id c var c = document.getElementById("c"); var ctx = c.getContext("2d"); //making the canvas full screen c.height = window.innerHeight; c.width = window.innerWidth; //chinese characters - taken from the unicode charset var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%"; //converting the string into an array of single characters matrix = matrix.split(""); var font_size = 10; var columns = c.width / font_size; //number of columns for the rain //an array of drops - one per column var drops = []; //x below is the x coordinate //1 = y co-ordinate of the drop(same for every drop initially) for (var x = 0; x < columns; x++) drops[x] = 1; //drawing the characters function draw() { //Black BG for the canvas //translucent BG to show trail ctx.fillStyle = "rgba(0, 0, 0, 0.04)"; ctx.fillRect(0, 0, c.width, c.height); ctx.fillStyle = "#0F0"; //green text ctx.font = font_size + "px arial"; //looping over drops for (var i = 0; i < drops.length; i++) { //a random chinese character to print var text = matrix[Math.floor(Math.random() * matrix.length)]; //x = i*font_size, y = value of drops[i]*font_size ctx.fillText(text, i * font_size, drops[i] * font_size); //sending the drop back to the top randomly after it has crossed the screen //adding a randomness to the reset to make the drops scattered on the Y axis if (drops[i] * font_size > c.height && Math.random() > 0.975) drops[i] = 0; //incrementing Y coordinate drops[i]++; } } setInterval(draw, 35); </script> <div class="img-wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYygrZgIU_1WjY1yAai9pp1hc56sm9bxMDa9aFOb5zyo5iA7mq" alt="CybernetiX Corp"></div> </body> </html>

着陆页画布/徽标覆盖

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-09-06 20:48:15

着陆页画布/徽标覆盖

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-09-06 20:48:15

解决方案1
0 已采纳 2018-09-06 20:48:15