[英]How to make a picture float over particles-js script?
對於這個愚蠢的問題感到抱歉,但我無法弄清楚,有人可以幫助我使圖片浮於粒子效果上嗎? 如果可以將鏈接添加到該圖像,它將更好。
這是我的代碼
<!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>
我找到一種添加方法:
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.