Question

我正在尝试创建数字鼓组。我有一个鼓组的图像，我想在每个鼓上放置圆形打击垫。当我改变视图大小时，我无法将打击垫保持在原位。我尝试使用bootstrap来保持div的位置，但我发现它不会起作用，因为调整大小只是堆叠左边的击打垫。当视图大小发生变化时，有没有办法使用CSS在drumset背景图像上保持触控板的位置？下面是我目前的HTML和我试图放置触控板的drumset图像。提前感谢您的帮助！

   <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>

Answer 1

我明白了。将容器设置为相对容器。将图像粘贴在宽度100％和高度自动的内部。然后将按钮div设置为绝对值，并使用顶部，右侧，左侧，底部位置。

Answer 2

您可以尝试使用html表或flex-box来包含“命中垫”。如果你使用百分比作为尺寸值，我认为你可以使你的命中垫与你的背景图像一致。

使用CSS粘贴Div位置

2 个答案: