Question

enter image description here

有人使用wix制作了这个模型，但是我已经尝试了很多使用bootstrap的东西来使按钮看起来像模拟。背景图像是单个图像，它没有被分割。

Answer 1

使用以下代码，希望此代码有用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
    body{
        margin: 0 auto;
        padding: 0;
        width: 100%;
        max-width: 1280px;
    }
    .btn1,.btn2,.btn3,.btn4 {
        color: black;        
        width: 80px;
        height: 28px;
        text-align: left;
        position: absolute;
        font-size: 12px;
        cursor: pointer;
        background-color: Transparent;
        z-index: 1;
        text-align: center;
    }.btn1{
        top: 18%;
        left: 27%;
    }.btn2{
        top: 18%;
        left: 41%;
    }.btn3{
        top: 18%;
        left: 54%;
    }.btn4{
        top: 18%;
        left: 66%;
    }
    img {
        display: block;
        left: 0;
        position: absolute;
        z-index: 1;
    }
</style>
</head>
<body>
<img src="WD4yq.jpg" alt="title"/>
<button class="btn1">Test1</button>
<button class="btn2">Test2</button>
<button class="btn3">Test3</button>
<button class="btn4">Test4</button>
</body>
</html>

Answer 2

如果您希望按钮位于图像中，请执行以下操作：
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
我希望这能回答你的问题

如何使按钮组与背景中的图像对齐？

2 个答案: