如何使图片浮于粒子-js脚本上？

Question

对于这个愚蠢的问题感到抱歉，但我无法弄清楚，有人可以帮助我使图片浮于粒子效果上吗？ 如果可以将链接添加到该图像，它将更好。

这是我的代码

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>jQuery Particles.js Example Page</title>
     <style>
       body {
         margin: 0;
         padding: 0;
       }
       h1 { position:absolute; top:30px; left:100px; color:#fff;}
       .jquery-script-ads { position:absolute; top:150px; left:100px;}
       canvas {
         position: absolute;
       }

       .background {
         background-image: url('1.jpg');
         background-size: cover;
         background-position: center bottom;
         background-repeat: no-repeat;
         background-attachment: fixed;
       }
     </style>
   </head>

   <body class="background">
   <h1>jQuery Particles.js Example Page</h1>
      <canvas class="canvas"></canvas>
     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
     <script src="dist/jquery.particles.js"></script>
     <script>
       $(document).ready(function() {
         $('.canvas').particles({
           connectParticles: true,
           color: '#ffffff',
           size: 3,
           maxParticles: 80,
           speed: 1.8
         });
       });
     </script>
  <IMG class="displayed" src="image.png" height="400" width="400">
   </body>
 </html>

Answer 1

我找到一种添加方法：

    IMG.displayed  {
       position: absolute;
      top: 50%;
       left: 50%;
       width: 400px;
       height: 400px;
       margin-top: -250px; /* Half the height */
       margin-left: -250px; /* Half the width */
    }

如何使图片浮于粒子-js脚本上？

问题描述

1 个解决方案

解决方案1
0 2018-01-10 01:56:49

如何使图片浮于粒子-js脚本上？

问题描述

1 个解决方案

解决方案1 0 2018-01-10 01:56:49

解决方案1
0 2018-01-10 01:56:49