Question

这是我的代码：

.signup img, .signup div{
    display: inline-block;
}
.signup-mobile{
    background: url('http://i.imgur.com/hIoWOG8.jpg') no-repeat;
    background-size: 70%;
    height: 110%;
    position: relative;
    left: 85px;
}
.signup-mobile .step1{
    background: url('http://i.imgur.com/DR77amO.png') no-repeat;
    width: 59%;
    position: relative;
    top: 92px;
    left: -79px;
    background-size: 100%;
    padding: 10px;
}
.signup-mobile .step1 input{
    width: 80%;
    text-align: center;
    margin: 10px auto;
    border-radius: 50px
}
.signup-mobile .step1 section span.country-code{
    position: relative;
    top: 2px;
    display: contents;
    color: #9f9e9e;
}
.signup-mobile .step1 section span.country-name{
    position: relative;
    width: auto;
    float: right;
    bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 135px;
}
.signup-mobile .step1 section input{
    width: 250px;
}
.btn-join-us {
    background-color: #ffc32a;
    border-radius: 20px;
    width: 50%;
    padding: 10px;
    border: none;
    font-size: 16px;
    color: #636363;
    font-weight: bold;
}
.signup-mobile .step1 .btn-join-us {
    position: relative;
    font-weight: 500;
    height: 40px;
    color: #000;
    top: 30px;
}
.step1 p{
    color: #FFFFFF;
    font-size: 16px;
    padding: 30px;
}

<link rel="stylesheet" type="text/css" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"/>
<div class="text-center">
    <h2>Sign Up</h2>
    <div class="signup">
        <div class="signup-mobile">
            <div class="step1">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam </p>
                <section>
                    <input class="form-control phone-number" type="text" name="mobilePhone">
                    <input class="form-control phone-number" type="text" name="mobilePhone">
                </section>
                <input type="button" class="btn-join-us" value="Continue">
            </div>
        </div>
    </div>
</div>

我想要做的是this image！

我的代码与屏幕的高度密切相关，这不是我想要的。另一方面，当屏幕高度很高时，移动图片和页脚之间会产生一些差距：image！

Answer 1

看看这个帮助：

.signup img,
.signup div {
  display: inline-block;
}

.signup-mobile {
  position: relative;
  display: inline-block;
  max-height: 550px;
  overflow-y: hidden;
}

.signup-mobile .step1 {
  background: url('http://i.imgur.com/DR77amO.png') no-repeat;
  position: absolute;
  overflow: auto;
  background-size: 100%;
  top: 23%;
  left: 8%;
  right: 7%;
  bottom: 0;
}

.signup-mobile .step1 input {
  width: 80%;
  text-align: center;
  margin: 10px auto;
  border-radius: 50px
}

.signup-mobile .step1 section span.country-code {
  position: relative;
  top: 2px;
  display: contents;
  color: #9f9e9e;
}

.signup-mobile .step1 section span.country-name {
  position: relative;
  width: auto;
  float: right;
  bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 135px;
}

.signup-mobile .step1 section input {
  width: 250px;
}

.btn-join-us {
  background-color: #ffc32a;
  border-radius: 20px;
  width: 50%;
  padding: 10px;
  border: none;
  font-size: 16px;
  color: #636363;
  font-weight: bold;
}

.signup-mobile .step1 .btn-join-us {
  position: relative;
  font-weight: 500;
  height: 40px;
  color: #000;
  top: 30px;
}

.step1 p {
  color: #FFFFFF;
  font-size: 16px;
  padding: 30px;
}

<link rel="stylesheet" type="text/css" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<div class="text-center">
  <h2>Sign Up</h2>
  <div class="signup">
    <div class="signup-mobile">
      <div class="step1">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam </p>
        <section>
          <input class="form-control phone-number" type="text" name="mobilePhone">
          <input class="form-control phone-number" type="text" name="mobilePhone">
        </section>
        <input type="button" class="btn-join-us" value="Continue">

      </div>
      <img src="http://i.imgur.com/hIoWOG8.jpg" />
    </div>
  </div>
</div>

将div设为移动图像

1 个答案: