2016-12-30 118 views
2

HTML:在线登录表单图像不显示完整

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

CSS

问:如何显示登录按钮和daftar按钮的全图像?

这里是什么样子的时刻:

screenshot

+0

你能解释一下为什么你回滚编辑我做了?我的编辑使问题更容易阅读,并且更容易回答(因为片段)。我只想知道你不喜欢编辑的内容,以及删除它的原因。 –

+0

即时通讯对不起,只是想编辑高度,从25到31px,即时通讯新的在这里先生,如何使用代码剪断? – wantywantype

+0

片段允许用户轻松运行/测试您的代码,并提供基本的代码编辑器。要编辑一个片段,你可以简单地编辑答案中的代码,或者去预览,然后点击“编辑这段代码” –

回答

1

在这种情况下,最简单的事情,没有一个高度设置的按钮,是只使用一个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>

+0

好吧它的工作http://prnt.sc/dpqpcz – wantywantype

+0

非常感谢先生! – wantywantype

0

当使用CSS背景,你需要指定元素的高度。
在这种情况下,高度为25px,请尝试将更多高度添加到元素。 让我知道如果工作。

+0

它的工作,我尝试设置高度31px,但是buton不适合,我只想使按钮内联 http://prntscr.com/dpqlcd – wantywantype

1

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

+0

试图使用背景大小:包含但没有工作 – wantywantype