html - 如何使带有图像响应的按钮

Question

背景也是响应式的，但是带有图像的按钮和选取框不会通过移动设备显示在正确的位置，如何使整个索引响应

      <div class="main">
        <div class="marquee">
          <marquee dir="ltr" direction="right" scrollamount="3">
            <h3 style="color:#804000;font-size:large;margin-top:0px;" align="center" >       
             <strong>  
              <img src="http://www.ghadaalsamman.com/new/images/image21.png" height="37" />
            </strong>
           </h3>
         </marquee>
       </div>
     </div>
      <a href="http://ghadaalsamman.com/new/site.html" id="btn1" class="button"></a>

CSS

body {
    background: url('images/bg.gif'); 
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}
.marquee{
    position:absolute;
    left:400px;
    top:300px;
    right:400px;
    display:inline;
    max-width:100%;
}
#btn1 {
    height:60px; width:490px;
    background: url("images/enter.gif");
    background-repeat: no-repeat;
    display: inline-block;
    margin-top:610px;
    margin-left:380px;
}
.button {
    padding: 5px;
 }

fiddle :

http://jsfiddle.net/m0sagal/3fp9j/

桌面 View

http://ghadaalsamman.com/new

Answer 1

DEMO

我对 html 和 css 做了一些修改，所以使用这段代码:

HTML:

<div class="main">
    <div class="container">
        <div class="marquee">
            <marquee scrollamount="3" direction="right" dir="ltr">
                 <h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>  
    <img height="37" src="http://www.ghadaalsamman.com/new/images/image21.png">
        </strong></h3>

            </marquee>
        </div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>

    </div>
</div>

CSS:

html {
    height: 100%;
    width: 100%;
}
body {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    margin: 0;
}
.marquee {
    display: block;
    position: absolute;
    top: 43%;
    width: 100%;
}
#btn1 {
    background-image: url("http://www.ghadaalsamman.com/new/images/enter.gif");
    background-repeat: no-repeat;
    background-position: center center;
    bottom: 10px;
    display: block;
    height: 53px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}
.button {
    padding: 5px;
}
.container {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
}
.main {
    height: 100%;
    padding: 0 20px;
}
@media screen and (max-width:500px) {
    #btn1{
        background-size: 100% auto;
    }
}

我做了什么:

我在主命名容器之后添加了一个 div，并用它来控制 max，并使用绝对位置在其中安装了选取框和按钮，这几乎完成了所有的技巧，但对于按钮背景图像，我使用了媒体查询。