内联登录表单图像不显示已满

Question

HTML：

＆＃13;

＆＃13;

form {
  padding-top: 5px;
  text-align: right;
  margin-bottom: 15px;
}
form img {
  width: 75px;
  height: 25px;
  margin-left: -5px;
}
form input {
  padding: 12px 17px;
  border: 0px solid #fff;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  width: 155px;
  color: #fff;
}
form button,
#btnDaftar,
#btnLivechat {
  display: inline-block; background: url(http://jawapoker88.com/img/images/login.png) top left no-repeat; width: 110px; height: 25px; border: none; cursor: pointer;}
  #btnDaftar {
    background-image: url(http://jawapoker88.com/img/images/daftar.png)
  }
  form input::-webkit-input-placeholder {
    color: #fff;
  }
  form input:-moz-placeholder {
    color: #fff
  }
  form input::-moz-placeholder {
    color: #fff
  }
  form input:-ms-input-placeholder {
    color: #fff;
  }

＆＃13;

<div class="wrapper">
  <form method="post" action="#">
    <input type="text" name="username" placeholder="Username" class="SITELOGIN" method="username" />
    <input type="password" name="password" placeholder="Password" class="SITELOGIN" method="password" />
    <button type="submit" class="SITELOGIN" method="login"></button>
    <a href="#" id="btnDaftar" class="SITELOGIN" method="register"></a>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

CSS

问题：如何显示登录按钮和daftar按钮的完整图像？

现在看来它是什么样的：

Answer 1

您应该将background-size: contain添加到#header form button, #btnDaftar, #btnLivechat以让图片适合容器。为了获得更漂亮的最终结果，您还可以添加vertical-align: middle;以使其正确对齐。

Answer 2

在这种情况下，最简单的做法是在不设置按钮高度的情况下，只使用img元素：

form {
  padding-top: 5px;
  text-align: right;
  margin-bottom: 15px;
}
form input {
  padding: 12px 17px;
  border: 0px solid #fff;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  width: 155px;
  color: #fff;
}
form button,
#btnDaftar,
#btnLivechat {
  display: inline-block;
  border: none;
  cursor: pointer;
  background:transparent;
  vertical-align:middle;
}
form input::-webkit-input-placeholder {
  color: #fff;
}
form input:-moz-placeholder {
  color: #fff
}
form input::-moz-placeholder {
  color: #fff
}
form input:-ms-input-placeholder {
  color: #fff;
}

<div class="wrapper">
  <form method="post" action="#">
    <input type="text" name="username" placeholder="Username" class="SITELOGIN" method="username" />
    <input type="password" name="password" placeholder="Password" class="SITELOGIN" method="password" />
    <button type="submit" class="SITELOGIN" method="login">
      <img src="http://jawapoker88.com/img/images/login.png">
    </button>
    <a href="#" id="btnDaftar" class="SITELOGIN" method="register">
      <img src="http://jawapoker88.com/img/images/daftar.png">
    </a>
  </form>
</div>

Answer 3

使用css背景时，需要指定元素的高度。
在这种情况下，高度 25px ，尝试将更多高度添加到元素。 如果工作，请告诉我。