Question

如何在自适应设计中将按钮附加到图片上的特定位置？如何将“登录”按钮附加到特定位置？当我改变窗口按钮的大小改变位置

<head>
    <link href="style/bootstrap.css" rel="stylesheet">
    <link href="style/style.css" rel="stylesheet">
</head>

<body>
    <div class="first-block">
        <div style="width:100%;">
            <div class="navbar  navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data- toggle="collapse" data-target="#responsive-menu">
                         <span class="sr-only">Меню</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                </button>
                    </div>
                    <div class="collapse navbar-collapse" id="responsive- menu">
                        <div class="nav navbar-nav">
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-parent">
                <button class="button registration1 col-xs-2    col-sm-2    col-md-2 col-lg-2">
        <a href="" style="font: 18px white;">Зарегистрироваться</a>
    </button>
            </div>

        </div>
    </div>
    <div class="second-block">
        <div style="width:100%">
            <div class="button-parent">
                <button class="button registration2 col-xs-2    col-sm-2    col-md-2 col-lg-2">
        <a href="" >Sign IN</a>
        </button>
            </div>
            <img src="https://s32.postimg.org/nwl1muvv9/2_3.jpg" class="img-responsive">
        </div>
    </div>

    <div class="third-block">
        <img src="https://s32.postimg.org/lnyflujyd/image.jpg" class="img-responsive">
    </div>
</body>

html, body {
    width: 100%;
    height: 100%;
}
.first-block {
    background: url(https://s32.postimg.org/heab1dm7p/image.jpg) center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;


}

.button{
  height: 5%;
     border-radius: 20px; 
       background-color:#19A4EC;
  position: absolute;  
}
.registration1{

    left:42%;
    top: 70%;

}
 .button-parent{
  margin: 0 auto;
} 

 .registration2{
    height: 7%;
    left:25%;
    top: 303%;

}

JSFiddle

Answer 1

您可以尝试在href属性中输入要链接按钮的页面的链接：

<button class="button registration2 col-xs-2    col-sm-2    col-md-2 col-lg-2">
    <a href="https://www.youtube.com/">Sign IN</a>
</button>

自适应设计：如何将按钮附加到图片上？

1 个答案: