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來定位它們。 （還是）感謝你的建議。 –