在線登錄表單圖像不顯示完整

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按鈕的全圖像？

這裏是什麼樣子的時刻：

來源

2016-12-30 wantywantype

你能解釋一下爲什麼你回滾編輯我做了？我的編輯使問題更容易閱讀，並且更容易回答（因爲片段）。我只想知道你不喜歡編輯的內容，以及刪除它的原因。 –

即時通訊對不起，只是想編輯高度，從25到31px，即時通訊新的在這裏先生，如何使用代碼剪斷？ – wantywantype

片段允許用戶輕鬆運行/測試您的代碼，並提供基本的代碼編輯器。要編輯一個片段，你可以簡單地編輯答案中的代碼，或者去預覽，然後點擊「編輯這段代碼」 –

在這種情況下，最簡單的事情，沒有一個高度設置的按鈕，是隻使用一個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>

來源

2016-12-30 15:34:14

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

非常感謝先生！ – wantywantype

當使用CSS背景，你需要指定元素的高度。
在這種情況下，高度爲25px，請嘗試將更多高度添加到元素。讓我知道如果工作。

來源

2016-12-30 15:15:22 Roy

它的工作，我嘗試設置高度31px，但是buton不適合，我只想使按鈕內聯 http://prntscr.com/dpqlcd – wantywantype

您應該將background-size: contain添加到#header form button, #btnDaftar, #btnLivechat以使圖像適合容器。爲了獲得更漂亮的最終結果，您還可以添加vertical-align: middle;以使其對齊。

來源

2016-12-30 15:15:28 Goombah

試圖使用背景大小：包含但沒有工作 – wantywantype

在線登錄表單圖像不顯示完整

回答

相關問題