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

小提琴：

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

桌面视图

http://ghadaalsamman.com/new

Answer 1

DEMO

我在html＆amp;中做了一些改动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;
    }
}

我做了什么：

我在主要名称容器＆amp;之后添加了一个div使用它来控制最大值，并使用绝对位置和放大器在其内部安装选框和按钮。这几乎是所有的技巧，但对于按钮背景图像，我使用了媒体查询。

如何使图像响应按钮

1 个答案:

DEMO