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 */
    }

如何使图片漂浮在particle-js脚本上？

1 个答案: