0
我正在尝试创建数字鼓组。我有一个鼓组的图像，我想在每个鼓上放置圆形击打垫。当我改变视图尺寸时，我无法将触击板保持在原位。我尝试使用bootstrap来保持div的位置，但是我发现这样做不起作用，因为调整大小只是将左边的打击垫堆叠起来。随着视图大小的改变，是否有任何方法可以在鼓组背景图像顶部使用CSS来保持原来的位置？以下是我目前使用的HTML和我正在尝试放置触控板的drumset的图像。预先感谢您的任何帮助！使用CSS的粘滞div位置
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<img id="playboard" src="drums.png" alt="">
<div class="row" style="height: 100px">
</div>
<div class="row" style="height: 50px">
</div>
<div class="row" style="height: 50px">
</div>
<div class="row" style="height: 50px">
<div class="col-md-4 col-sm-4">
<button class="hit hihathit animated pulse infinite" ng-audio="hihat.mp3" start="0.1"></button>
</div>
<div class="col-md-4 col-sm-4">
<button class="hit crashhit animated pulse infinite" ng-audio="crash.mp3" start="0.1"></button>
</div>
<div class="col-md-4 col-sm-4">
<button class="hit ridehit animated pulse infinite" ng-audio="ride.mp3" start="0.1"></button>
</div>
</div>
<div class="row" style="height: 50px">
<div class="col-md-6 col-sm-6">
<button class="hit tomonehit animated pulse infinite" ng-audio="tomone.mp3" start="0.1"></button>
</div>
<div class="col-md-6 col-sm-6">
<button class="hit tomtwohit animated pulse infinite" ng-audio="tomtwo.mp3" start="0.1"></button>
</div>
</div>
<div class="row" style="height: 50px">
</div>
<div class="row" style="height: 50px">
<div class="col-md-4 col-sm-4">
<button class="hit snarehit animated pulse infinite" ng-audio="snare.mp3" start="0.1"></button>
</div>
<div class="col-md-4 col-sm-4">
<button class="hit kickhit animated pulse infinite" ng-audio="kickdrum.mp3" start="0.1"></button>
</div>
<div class="col-md-4 col-sm-4">
<button class="hit floortomhit animated pulse infinite" ng-audio="floortom.mp3" start="0.1"></button>
</div>
</div>
</div>
</div>
</div>
你好，你有没有尝试过使用html5 canvas元素 - 可能比使用div更好 - 非常酷的项目的方式 –
我没有！我会仔细看看的。谢谢:) –
我抬起头看着帆布，看起来我会遇到同样的问题。我可以使用Javascript绘制它们，但必须使用css来定位它们。 （还是）感谢你的建议。 –